There is a code that is responsible for switching the slider. Need to create a smooth animation, how can this be done? Here is the code:

$(e.target).parent().parent().find('.content-slider').css({ 'transition': '.3s ease-out', 'left': function (index, value) { if (parseFloat(value) === -540) { return value = 0; } return parseFloat(value) - 270 + 'px'; } });

2 answers 2

Register transition in css

 $(document).hover(function () { $('#anim').css('left', '220px'); }, function () { $('#anim').css('left', 0); }); 
 #anim { transition: left .3s ease-out; width: 100px; height: 100px; border: 1px solid #000; position: absolute; left: 0; top: 0; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="anim"></div>

  • It is not recommended to animate anything other than opacity and transform . - Sasha Omelchenko
  • @SashaOmelchenko why? - Vasya Shmarovoz
  • In general, because it has a bad effect on performance, and specifically in this case, because when animating the left property, unlike transform: translate , there will be no sub-pixel rendering. Here is a good article with an explanation: paulirish.com/2012/… - Sasha Omelchenko
  • This does not affect performance in any way, often the transformation is more. In any case, there is the remarkable property will-change ( w3.org/TR/css-will-change-1/#propdef-will-change ), which includes hardware acceleration for the render. The fact that subpixel rendering will be absent in the left is yes, here is the question of visualization. But the author specifically asked about the left, so his script was tied to the property left. In your comment, I did not find the answer to the question “why it is not recommended to animate anything but opacity and transform”. - Vasya Shmarovoz
 $(e.target).parent().parent().find('.content-slider').html(function() { var l; if(parseFloat($(this).attr('value')) === -540){ l = 0; }else{ l = parseFloat($(this).attr('value')) - 270; }; $(this).animate({left: l + 'px'}, 300) });