Question

我有jQuery动画，排队等候一个元素：

var el = $('.elem');

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

3动画算作1个主要动画，只是链接。它需要1000ms才能运行，我想在我的例子中使用第一个动画的前60％的缓动，然后在第二个动画中使用缓和的下一个30％，它完成了最后10％的缓动。 / p>

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

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

另一种使其成为插件的方法。使用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});

提供输入

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

具有常见缓动的jQuery动画队列

3 个答案: