Question

这可能是关于jQuery的延迟和承诺的新手问题，在以下代码中

var p = $("#foo").animate({ opacity: 0 }, 2000).promise();

console.log(p);
console.log(p.constructor);
console.log($.fx.interval);

p.progress(function() {
    console.log("progress callback is invoked");
});

我根本没有看到console.log()输出，据说在动画期间每隔13ms调用一次，即2秒。为什么以及如何使其发挥作用？

更新：据说，它应该与http://jsfiddle.net/mF2rn/11/相同，它实际上会打印出console.log输出。

代码是：

$("#foo").animate({ 
    opacity: 0
}, { 
    progress: function() {
        console.log("progress callback is invoked");
    },
    duration: 2000
});

Answer 1

解决方案是创建一个自定义延迟对象，并使用动画的进度事件处理程序让自定义延迟通知进度。这是代码：

HTML

<div class="paras">
    <p>Hello, This is my first paragraph</p>
    <p>Hello, This is my second paragraph</p>
    <p>Hello, This is my third paragraph</p>
</div>

守则

var dfd = $.Deferred(),
promise = dfd.promise(),
allParas = $("div.paras p")
    .animate({
        opacity: 0.25
    }, 
    {
        duration: 2000, 
        progress: function(promise, progress, remaining) {
            dfd.notify(progress);
        }, 
        done: function(promise) { 
            dfd.resolve("Animation completed"); 
        }
    });

promise.progress(function(value) {
    console.log("PROGRESS!!! - ", value);
});
promise.then(function(response) {
    console.log(response);
});

为什么在动画期间没有调用这个jQuery promise的进程回调？

1 个答案: