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

fadeOutcomplete属性を取ることができます: 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 に答える
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 に答える
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 に答える