1

http://jsfiddle.net/yXnWP/2/を見て、「View Recent Updates」に注目してください。それをクリックすると、更新から登録フォームにどのように移行するかに注目してください。ゆっくりとそれを続けて、4 回目あたりでトランジションがどのように変化するかに注目してください。これは、それを担当するコードの一部です。さまざまな移行のこの問題を解決する可能性のあるアドバイス、ヒント、または提案を教えてください。

私の質問は: なぜ最初の 3 回のクリックで一方向に遷移し、その後別の遷移を行うのですか? 更新すると、最初の 3 回のクリックとスイッチの最初のトランジションから始まります...なぜですか?

                            <div class='index-update-register-container'>
                <button class='index-updates-register-link' value='FadeOut' onclick="fade('reg', 'upd', this);">View Recent Updates</button>
            </div>
            <div class='index-updates-container' id='upd'>
                Updates
            </div>
            <div class='index-register-container' id='reg'>
                <form action='index.php' method='post'>
                    Register Form
                </form>
            </div>              


</body>
<script>
function fade(div_id_out, div_id_in, button) {
    if(button.value == 'FadeOut') {
        $('#'+div_id_out).fadeOut(500, function() {
        $('#'+div_id_in).fadeIn(500);
        });
        $(button).html("Register");
        button.value = 'FadeIn';
    }
    else {
        $('#'+div_id_out).fadeIn(500, function() {
        $('#'+div_id_in).fadeOut(500);
        });
        $(button).html("View Recent Updates");
        button.value = 'FadeOut';
    }
}
</script>
4

2 に答える 2

0

フレームの更新間隔を長くすると、以前は役に立ちました。

jQuery.fx.interval = 13 //This is the default

に増やしてみることができます30。間隔を長くすると、リフレッシュレートが低下するため、メモリリソースの負荷が軽減されるため、アニメーションのジャンプが少なくなります。

これに関する詳細はこちら。

于 2012-07-11T06:07:58.953 に答える
0

muthuの回答へのコメントに投稿したjsfiddleに基づいています。

div の 1 つを最初から非表示に設定する必要があります。そうしないと、両方が表示されて遷移が発生しません。

上部の単純な$('#upd').hide();ものがこれを解決します。

JsFiddle の更新:
http://jsfiddle.net/K7DbQ/

于 2012-07-11T07:17:34.403 に答える