1

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

我的问题是：为什么它会在前 3 次点击时以一种方式转换，然后在进行不同的转换之后？刷新，它从 FIRST 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 设置为隐藏，否则它们都是可见的，因此没有过渡。

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

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

于 2012-07-11T07:17:34.403 回答