jquery - 如何使 jQuery 动画看起来流畅？

Question

我在这个动画上坐了很长时间，想不出让它工作的最佳方式。我希望第一个和第二个 li 元素会慢慢淡出，同时第六个和第七个元素会淡入，而所有元素都慢慢向左移动。 这是我的动画的样子，完全不是我想要的.. 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 1

Jquery 动画已经足够好了，人们说它很慢等等，但就浏览器兼容性和性能而言，它是目前可用的最好的。 当然，一旦安装，greensock 会更快，但似乎没有人计算额外的服务器请求，CSS 存在跨浏览器问题，jQuery animate 方法尽管以速度慢而闻名，但如果你已经运行 jquery 并且对于中小型企业来说，它是最好的大型元素。

代码的相关部分:

 $(document).ready(function() {
 var items = $('.feedbak-logo li');
 items.slice(5).hide();
 });
 var items = $('.feedbak-logo li');
 items.click(function() {
 items.eq(0).fadeOut(1000);
 items.eq(1).fadeOut(1000);

items.eq(0).animate({
left: 50
}, {
duration: 1000,
step: function(now, fx) {
  items.gt(0).css("left", now);
}
});
items.eq(5).fadeIn(1000);
items.eq(6).fadeIn(1000);
});

这是改进后的代码，其中一切运行平稳，没有跳动。

$('#one').click(function(){
original();
});
$('#two').click(function(){
backToOriginal();
});


function original() {
var items = $('.feedbak-logo li');
items.slice(5).css({'opacity': 0});

items.eq(0).animate({opacity: 0, left:'-30px'},500);
items.eq(1).animate({opacity: 0, left:'-30px'},500);
items.eq(5).animate({opacity: 1},500);
items.eq(6).animate({opacity: 1},500);
items.each(function(i) {
setTimeout(function() {

  items.removeClass("nonAnimated").addClass("animated");
}, 200 * i);


});
}

function backToOriginal() {
var items = $('.feedbak-logo li');


items.eq(0).animate({opacity: 1, left:'30px'},500);
items.eq(1).animate({opacity: 1, left:'30px'},500);
items.eq(5).animate({opacity: 0},500);
items.eq(6).animate({opacity: 0},500);
items.each(function(i) {
setTimeout(function() {
  items.removeClass("animated")
    .addClass
  ("nonAnimated");

}, 100 * i);


});
}

代码笔:

http://codepen.io/damianocel/pen/grRaEW

我不知道从哪里开始，彻底了解 jquery animate 文档，它确实是所有坏东西中最不糟糕的。当客户问您为什么网站无法在一半的移动浏览器中运行时，这一点就很清楚了。

不要选择那样的元素，始终使用 Jquery 缓存 DOM 元素引用，尤其是动画。

对于原生 JS 中有点不同的方法，试试这个:

http://codepen.io/damianocel/pen/PzYXmv

不知道这是否有用，但这是一个非常相似的原生 js 实现，我可以完全按照你的要求做，但明天。