0

我试图在 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();  
    });
4

4 回答 4

3

你应该能够做到这一点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/

于 2013-01-22T14:02:28.850 回答
3

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();  
    });

});
于 2013-01-22T14:03:42.270 回答
1

您可以使用 jQuery 的“队列”功能对函数调用进行排队。

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

于 2013-01-22T14:01:00.360 回答
0

您应该使用回调函数。

// 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/

于 2013-01-22T14:06:47.240 回答