Question

我试图在jquery中控制我的函数的顺序，点击id就像要淡出的图像，要交换的图像的来源，然后淡入新图像。

我有以下那种作品，只有一次完成它们，是他们防止这种情况的方法吗？

    // Animate height of div containing information
    $(this).animate({
        'height' : '600px'  
    },500, function(){
        $('html, body').animate({ scrollTop: $(this).offset().top });

        // Fade initial image out
        img.fadeOut();

        // Switch to hi-red image
        img.attr('src', function(i, value) {
            return '_includes/images/work/hires/' + value;
        });

        //Fade Hi res image in
        img.fadeIn();  
    });

Answer 1

您应该可以使用promise()

执行此操作

// Fade initial image out
img.fadeOut();

// Switch to hi-red image
img.promise().done(function() {
    $(this).attr('src', function(i, value) { return '_includes/images/work/hires/' + value; });
});

//Fade Hi res image in
img.fadeIn();

文档：http://api.jquery.com/promise/

Answer 2

fadeOut可以使用complete属性：http://api.jquery.com/fadeOut/

// Animate height of div containing information
$(this).animate({
    'height' : '600px'  
},500, function(){
    $('html, body').animate({ scrollTop: $(this).offset().top });

    // Fade initial image out
    img.fadeOut(400, function() {
        // Switch to hi-red image
        img.attr('src', function(i, value) {
            return '_includes/images/work/hires/' + value;
        });

        //Fade Hi res image in
        img.fadeIn();  
    });

});

Answer 3

您可以使用jQuery的'queue'功能来排队函数调用。

http://api.jquery.com/queue/

Answer 4

您应该使用回调函数。

// Fade initial image out
img.fadeOut(duration, function () {
    // Switch to hi-red image
    img.attr('src', function(i, value) {
        return '_includes/images/work/hires/' + value;
    });

    //Fade Hi res image in
    img.fadeIn();
})

这样，一旦第一个图像淡出，jQuery将调用您作为参数传递的匿名函数。

来源：http://api.jquery.com/fadeOut/

订购jQuery函数，仅在最后完成时运行

4 个答案: