Question

我正在尝试为Nivo Lightbox中显示的项目实现CSS动画过渡。我已经插入并运行了新函数，但是在完成之前会运行以下两个函数。

$('.nivo-lightbox-prev').off('click').on('click', function(e){
    e.preventDefault();                
    var index = galleryItems.index(currentLink);
    currentLink = galleryItems.eq(index - 1);
    if(!$(currentLink).length) currentLink = galleryItems.last();
    $this.options.beforePrev.call(this, [ currentLink ]);  # <---- new function I added
    $this.processContent(content, currentLink);            # <---- existing function 1
    $this.options.onPrev.call(this, [ currentLink ]);      # <---- existing function 2
});

我知道的唯一方法是将它们放入回调中，但.call（）不接受回调。

我试过了：

function beforePrev(callback){
    $this.options.beforePrev.call(this, [ currentLink ]);
    callback();
}
function onPrev(){
    $this.processContent(content, currentLink);
    $this.options.onPrev.call(this, [ currentLink ]);
}
beforePrev(onPrev);

但表现相同。

如果相关，则beforePrev的代码为：

beforePrev: function() {
    el = $('.nivo-lightbox-content');
    el.addClass('animated fadeOutLeft');
    el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
        el.removeClass('fadeOutLeft');
    });
},

有人能指出我正确的方向吗？

更新/编辑以获得更清晰：这是完整的原始Nivo代码：link

从我的阅读中，$this只是一个引用init函数的标准变量，而不是DOM对象。我认为这是难以做到的原因之一。

Answer 1

使用.queue()

只有在函数a完成后才执行函数b：

$('element').a()
.queue(function() {
   $('element').b();
   $(this).dequeue();
});

Answer 2

结果deferind / promise是关键，使用jQuery的.when（）：http://api.jquery.com/jquery.when/

这个答案：How to use "queue" or "deferred" in what condition? What are their designing purpose?帮助 - .queue（）主要用于动画并作用于DOM对象，而.deferred（）用于异步操作。

所以在这个例子中：

$('.nivo-lightbox-prev').off('click').on('click', function(e){
    e.preventDefault();
    var index = galleryItems.index(currentLink);
    currentLink = galleryItems.eq(index - 1);
    if(!$(currentLink).length) currentLink = galleryItems.last();
    $.when($this.options.beforePrev.call(this, [ currentLink ])).done(function(){
        $this.processContent(content, currentLink);
        $this.options.onPrev.call(this, [ currentLink ]);
    });
});

然后在beforePrev函数中，首先设置一个.deferred（）对象，然后在完成时设置.resolve（），最后再传递.promise（）：

beforePrev: function() {
    var deferred = $.Deferred();
    el = $('.nivo-lightbox-content');
    el.addClass('fastAnimated fadeOutRight');
    el.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function (e) {
        el.removeClass('fadeOutRight');
        deferred.resolve();
    });
    return deferred.promise();
},

如何链接.call（）函数 - 向Nivo Lightbox添加过渡

2 个答案: