1

I'm trying to create a custom callback for the jQuery .animate() function. I'm limited to jQuery 1.4.2 and based my custom call on this [article by Dan Switzer][1]

(function ($){
    var oldAnimate = $.fn.animate;
    $.fn.animate = function(){
        this.trigger('animate.before', arguments);
        var animateResult = oldAnimate.apply(this, arguments);
        this.trigger('animate.after', arguments);
        return animateResult;
    };
})(jQuery || {});

$('#ID').bind('animate.after', function (){ 
    //Do Something
});

However when I run this code, my '//Do Something' does not trigger. I also tried following [Dave Ward's article][1] as well, using this:

var oldAnimate = jQuery.animate;

jQuery.animate = function() {
    if (typeof animate.before === 'function')
    animate.before.apply(this, arguments);
    var animateResult = oldAnimate.apply(this, arguments);
    if (typeof animate.after === 'function')
    animate.after.apply(this, arguments);
    return animateResult;
};

I'm not sure where I'm going wrong.

4

2 回答 2

1

好的，所以您发现您的代码不起作用。第一步是简化它并分别测试它的各个部分。让我们从事件开始。

$("#ID").bind("animate.before animate.after",function(e){
   console.log(e.type); 
}).trigger("animate.before").trigger("animate.after");

这会导致两次触发类型都等于“动画”的两个事件。要让它说 animatebefore 和 animate after，请将其替换.为:

$("#ID").bind("animate:before animate:after",function(e){
   console.log(e.type); 
}).trigger("animate:before").trigger("animate:after");

现在我们正确地得到animate:before和animate:after。现在我们知道我们的事件正在运行，让我们将它与 animate 方法联系起来。

$("#ID").bind("animate:before animate:after",function(e){
   console.log(e.type); 
});

var oldanim = $.fn.animate;
$.fn.animate = function() {
    this.trigger("animate:before");
    oldanim.apply(this,arguments);
    this.trigger("animate:after");
};

$("#ID").animate({"width":"200px"},2000,function(){
    console.log("animation complete");
});

有用！！！但是，您很快就会注意到，后续事件的发生时间比应有的要晚得多。这是因为 animate 方法使用 setTimeouts 以异步方式执行，因此代码继续运行。由于我们在 1.5 之前没有延迟对象，因此我对如何解决这个问题还没有任何建议。您可以覆盖完整的功能，但您必须考虑到它可以以两种不同的方式附加。

于 2013-08-21T17:50:29.800 回答
0

选项怎么样complete？我想这在 jQuery 1.4.1 中可用

$('#id').animate({
    properties..
}, {
    complete: function() {
        // doStuff
    }
});
于 2013-08-21T17:36:35.350 回答