javascript - Div 对 fadeIn jQuery 感到不安

Question

当我翻转 .comptext_rollover div 时，它应该隐藏页面上的初始 div 并显示 minipage div。但确实如此，但有时真的很不稳定，而且 minipage div 有时会显示在 initialpage div 下方。有任何想法吗？对不起，我是编码新手!提前致谢。

$(document).ready(function() {

    $('#mini_page').hide();

    $('.comptext_rollover').hover(function() {
        $('#initial_page').hide();
        $('.register_button').hide();
        $('#mini_page').fadeIn(100);
        $('#container').css({
            'margin-top': '-217px'
        });

    }, function() {

        $('#mini_page').hide();
        $('#initial_page').show();
        $('.register_button').show();
        $('#container').css({
            'margin-top': '-150px'
        });

    });

});

Answer 1

我准备了一个 fiddle 演示 HERE

重新编辑:

JSFIDDLE DEMO

(demo可能不正确，主要CSS是外链) 我用过:

<div id="container">
    <div id="initial_page" class="page">
        <div id="playvideo_hoverbutton"></div>
        <div class="register_button"></div>
        <div id="invisible_register2"></div>

        <div id="termsandconditionsapplyshort"></div>
    </div>

    <div id="mini_page" class="page">
        <div id="minicar_animated"></div>
        <div id="worth25k"></div>
        <div class="register_button"></div>
        <div id="invisible_register"></div>
    </div>

    <!-- THE ROLLOVER IS OUT OF ALL 'PAGES'! -->
    <div class="comptext_rollover">
    <!--<div id="competition_text"></div>-->
    </div>
</div>

$('#mini_page').hide();

$('.comptext_rollover').mouseenter(function() {
    $('.page').fadeToggle(400);
});

$('.comptext_rollover').mouseleave(function() {
    $('.page').fadeToggle(400);
});

无论如何你应该做什么:

将您需要“交换”到容器中的 2 个屏幕放在 absolute 位置。 比起你所做的:

将“滚动”元素置于“屏幕”之外。

调整 CSS 中较大图像(汽车图像)的 marginTop(就像我所做的那样)以修复错误的“跳跃”。

• 如果可能:只有一个翻滚 Action 元素!
• 修复汽车图片的顶部边距。 (给它一个-Npx)
• 这样做你不需要做那些定位你的容器的事情 -Npx

还有一种更简单的方法可以达到同样的效果: 您向两个屏幕添加一个类 .swappable，使第二个屏幕成为 (CSS)display:none; ，然后您只使用 jQuery 切换这个类。