回调CSS动画结束

Question

我有一个小的jQuery函数,其中返回值必须在子函数中触发.原因:我想稍后使用其他jQuery函数链接此函数.但是下一个链接函数应该在main函数返回jQuery对象之后启动

app.h.aniend = 'webkitAnimationEnd oanimationend msAnimationEnd animationend';
$.fn.animate_scale = function( callback ) {
    var $this = $(this);
    $this.addClass('animate_scale').one( app.h.aniend, function() {
        $(this).removeClass('animate_scale');
        if( typeof callback === 'function' ) {
            callback($this);
        }
        return $this; // return here...
    });
    // return $this;
};

有没有说jQuery要等到子函数返回必要的jQuery对象进行链接？

$('#my_object').animate_scale().fadeOut(2000);

Answer 1

$( '#my_object').animate_scale().fadeOut(2000);

如果你想.fadeOut()等待animate_scale()完成,animate_scale需要排队:

排队你的插件:

通常,当您链接 fx方法时,例如:

$("#ball").animate({left:200}).fadeOut();

你会看到球的动画效果,只有动画完成后它才会消失 - 它会逐渐消失.
为什么？导致jQuery将进入stach animate而不是数组,并在触发下一个Method之前等待每个解析. fadeOutqueue

要在插件中复制相同的行为:

jsFiddle演示(队列在行动!)

$.fn.animate_scale = function( callback ) {
    var $this = this;
    return $this.queue(function() { 
        $this.addClass('animate_scale').on("animationend", function() {
            $this.dequeue();
            if (typeof callback == 'function') callback.call( $this );
        });
    });
};


$('#my_object').animate_scale(function() {
    console.log( "Scale is done!" );
}).fadeOut( 2000 ); // fadeOut will wait for animate_scale to dequeue (complete)

我不需要队列堆叠

如果您希望您的插件以无阻碍(同时)方式处理其他链接的fx方法,请
仅使用回调:

jsFiddle演示(无队列)

$.fn.animate_scale = function( callback ) {
  var $this = $(this);
  return $this.addClass('animate_scale').on("animationend", function() {
      if (typeof callback == 'function') callback.call( this );
  });
};

$('#my_object').animate_scale(function(){
    console.log("Scale done.");
                  // use $(this).fadeOut(2000); here!! cause otherwise...
}).fadeOut(2000); // ...if chained here, will fade immediately!!!!!