Question

请查看http://jsfiddle.net/yXnWP/2/并注意“查看最近的更新”。点击它并注意它如何从更新转换为注册表单？现在继续慢慢地这样做，注意转变如何改变第四次。这是代码的一部分。请给我任何可以解决不同转换问题的建议，提示或建议。

我的问题是：为什么它会以第一次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>

Answer 1

增加帧刷新间隔对我有所帮助。

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

您可以尝试将其增加到30。增加间隔意味着你正在降低刷新率，因此你的动画会显得不那么跳跃，因为它减少了内存资源的负担。

有关此here的更多信息。

Answer 2

基于我在评论中发布的jsfiddle对muthu的回答。

你需要将一个div设置为从开头隐藏，否则它们都是可见的，因此没有转换。

顶部的简单$('#upd').hide();可以解决此问题。

更新了JsFiddle：
http://jsfiddle.net/K7DbQ/

jQuery fadeOut淡出问题

2 个答案: