Question

我长时间坐在这个动画上，无法想到最好的工作方式。我想第一和第二项目将慢慢淡出，同时第六和第七项将淡入，而所有项目都慢慢向左移动。这是我的动画的样子，它不像我想要的...... 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动画方法尽管它的声誉很慢，如果你已经运行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);


});
}

codepen：

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

我不知道从哪里开始，从内到外学习jquery动画文档，它实际上是所有坏事中最糟糕的。当客户端询问您为什么该网站在一半的移动浏览器中不起作用时，这一点就变得清晰了。

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

对于本机JS中的一些不同方法，请尝试以下方法：

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

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

Answer 2

如上所述 webeno ，您可以尝试使用.animate({'width': 'toggle'});代替.fadeout()

Answer 3

这是通过组合opacity和transform来完成CSS转换的一个非常简单的示例：

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

编辑：更正的网址

edit2：投票，因为没有直接提供代码？好吧，这是...

.fade-in,
.action .fade-out{
  opacity: 0;
}
.action .fade-in,
.fade-out {
  opacity: 1;
}

.action li {
  transform: translateX(-200%);
}

jQuery('.feedbak-logo').click(function (){
    $(this).addClass('action');
});

如何让jQuery动画看起来流畅？

3 个答案: