jquery - 带有通用缓动的 jQuery 动画队列

Question

我有排队等待单个元素的 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% 的缓动结束。

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

Answer 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);

Answer 2

另一种将其作为插件的方法。用小提琴

(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});

Answer 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() {    
               }) 
       })
  })
});