带有通用缓动的 jQuery 动画队列答案

【问题标题】：jQuery animation queue with common easing带有通用缓动的 jQuery 动画队列
【发布时间】：2013-08-08 21:28:32
【问题描述】：

我有排队等待单个元素的 jQuery 动画：

var el = $('.elem');

el.animate({
        width: 120
    },
    600,
    'easeInOutQuint'
).animate({
        width: 90
    },
    300,
    'easeInOutQuint'
).animate({
        width: 100
    },
    100,
    'easeInOutQuint'
);

这 3 个动画算作 1 个主动画，只是链接在一起。运行需要 1000 毫秒，我想在我的示例中为第一个动画使用前 60% 的缓动，然后在第二个动画中使用下一个 30% 的缓动，并以最后 10% 的缓动结束。

有没有办法让缓动成为这些排队动画的全局值？

【问题讨论】：

我不明白这个问题。您是否希望避免每次都输入缓动？您可以将其存储在变量中并使用它。如果不正确，你想完成什么？
请查看我对@sza 答案的评论，这应该可以解决这个问题。

标签： jquery jquery-animate

【解决方案1】：

如果我正确理解了您的问题，也许您可以将逻辑包装在一个函数中，这样您就可以传递持续时间并重用这样的链接动画：

var el = $('.elem');

var ease = function(elem, duration) {
    elem
    .animate({width: 120}, 0.6 * duration, 'easeInOutQuint')
    .animate({width:  90}, 0.3 * duration, 'easeInOutQuint')
    .animate({width: 100}, 0.1 * duration, 'easeInOutQuint');
}

ease(el, 1000);

【讨论】：

啊，有道理。我根本不明白这个问题。但很好的电话。 +1 很好的解决方案！
是的，肯定喜欢这个！
这是您在 jsfiddle 中的代码：jsfiddle.net/sAJDf 动画的每个树部分都使用相同的缓动，但不是通用缓动。您的示例在每个动画实例中使用 easings.net/#easeInOutQuint（参见缓动图）此动画。所以每 3 个动画进出部分都很慢，这会破坏动画组的动态。我需要这三个动画的全局缓动。类似于，第一个动画 easeInQuint，第二个是持续时间较短的线性动画，然后是 easeOutQuint。你看到不一样了吗？ jsfiddle.net/jMAjw

【解决方案2】：

另一种使其成为插件的方法。与Fiddle

(function ( $ ) {
    $.fn.ease = function( options ) {
        var settings = $.extend({
            // These are the defaults.
            style: "swing",
            duration : 1000
        }, options );

        return this.each(function(){
            $(this)
            .animate({width: 120}, 0.6 * settings.duration, settings.style)
            .animate({width:  90}, 0.3 * settings.duration, settings.style)
            .animate({width: 100}, 0.1 * settings.duration, settings.style);
        }); 
    };
}( jQuery ));

用法 html : <span>This is test line to to work on animate plugin ease</span> js:$(document).ready(function(){ $('span').ease() });

也可以输入$(element).ease({duration:2000});

【讨论】：

请查看我对@sza 答案的评论。

【解决方案3】：

The simplest way to do this is keep it nested like:

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: "140px"

  }, 5000, "", function() {
       $( "#note" ).animate({
          width: "100px"    
             }, 4000, "", function() {   
                $("#note2").animate({
                    width: "60px"

                    }, 2000, "", function() {    
               }) 
       })
  })
});

【讨论】：

请查看我对@sza 答案的评论。