-2

ある機能が完了した後、別の機能を動作させるのに苦労しています。コードの前半は機能しますが、その後の機能は機能しません。私は何を間違っていますか？

HTML

<div id="feature">
    <div id="open"></div>
</div>

CSS

#feature {
    position:relative;
    width:100%;
    height:450px;
}
#open {
    position:relative;
    width:100%;
    height:200px;
    background:red;
}

jQuery

$('#open').click(function () {
    $(this).animate({
        height: 50
    }, {
        duration: 'slow'
    }).css('overflow', 'visible'),
    function () {
        $('#open').animate({
            height: 200
        }, {
            duration: 'slow'
        })
    };
    // Animation complete.
});

JS フィドル。

http://jsfiddle.net/C8fA7/

4

2 に答える 2

0

関数は への引数である必要がありますが、 への呼び出しを終了してからずっと後に、 の後にanimate配置しました。代わりにこれを試してください：cssanimate

$(this).animate({
    height: 50
}, {
    duration: 'slow'
}, function () {
    $('#open').animate({
        height: 200
    }, {
        duration: 'slow'
    })
}).css('overflow', 'visible');

チェーンを明示的にすると、これはより明確になります。

var temp = $(this);
temp = temp.animate({ height: 50 }, { duration: 'slow' });
temp = temp.css('overflow', 'visible');

その時点で、次の迷子の関数が残ります。

function () {
    $('#open').animate({ height: 200 }, { duration: 'slow' });
}

構文エラーはありませんが、呼び出されていないため何もしません。

また、コメントは、// Animation completeアニメーションが非同期であることを認識していない可能性があることを示しています。ステートメントを終了するanimateと、アニメーションが開始されますが、まだ終了していません。アニメーションが完了すると、コールバック関数が呼び出されます。animate呼び出しに続くステートメントは待機しません。

于 2013-04-21T23:58:31.990 に答える