Giedidius Giedidius - 5 months ago 10
CSS Question

How to make jQuery animation look smooth?

I'm sitting on this animation for a long time and can't think the best way for it to work. I want that first and second li item would slowly fadeOut and at the same time sixth and seventh item would fadeIn while all items are slowly moving to the left.
Here is how my animation looks like, it's nothing like I wanted..
https://jsfiddle.net/nqo65mcd/2/

jQuery(document).ready(function() {
jQuery('.feedbak-logo li').slice(5).hide();
});

jQuery('.feedbak-logo li').click(function (){
jQuery('.feedbak-logo li[data-number = "1"]').fadeOut({queue: false, duration: '500'});
jQuery('.feedbak-logo li[data-number = "2"]').fadeOut({queue: false, duration: '1000'});
position = 80;
jQuery('.feedbak-logo li').animate({queue: false,left: '-='+position+'px'}, 1000);
jQuery('.feedbak-logo li[data-number = "6"]').fadeIn({queue: false, duration: '500'});
jQuery('.feedbak-logo li[data-number = "7"]').fadeIn({queue: false, duration: '1000'});
});

Answer

This is a very simple example of doing it with CSS transitions by combining opacity and transform:

https://jsfiddle.net/MattDiMu/t3umvbcx/

edit: corrected url

Comments