Question

当我翻转.comptext_rollover div时，它应该隐藏页面上的初始div并显示minipage div。但确实如此，但有时真的是跳跃，而且小型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

我准备了一个小提琴演示 HERE

<强>重新修改：

JSFIDDLE 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);
});

无论如何你应该做什么：

定位absolute您需要“交换”到容器中的2个屏幕。比你做的更多：

将'rollover'元素放在'屏幕'之外。

调整CSS中较大图像（汽车图像）的marginTop（就像我一样）来修复错误的“跳跃”。

如果可能：只有一个翻转动作元素！
修复汽车图像的上边距。（给它一个-Npx）
这样做你不需要定位你的容器-Npx

还有一种更简单的方法可以达到同样的效果：你向BOTH屏幕添加一个类.swappable，制作第二个（CSS）display:none;，而不是只使用jQuery切换这个类。

Answer 2

你没有花费大量的时间来淡入淡出。你也只是隐藏了一些使得淡入淡出的div，取决于你放置它们的位置。也许使用幻灯片。我在此处保存了一个示例：http://jsfiddle.net/kBEUH/

$(document).ready(function(){
    $('#mini_page').hide();
    $('.comptext_rollover').hover(function () {
        $('#initial_page').fadeOut(1000);
        $('.register_button').fadeOut(1000);
        $('#mini_page').slideDown(1000);

  }, function(){
        $('#mini_page').slideUp(1000);
        $('#initial_page').fadeIn(1000);
        $('.register_button').fadeIn(1000);

  });
});

Answer 3

如果你在hover（）函数中添加console.log，你会发现悬停就像疯了一样。这会导致动画在移动鼠标时反复开始。

您可以利用jquery :animated选择器：

$('.comptext_rollover').hover(function() {

    //enable this line to see the hover event is firing every time your mouse moves
    //console.log("hovering")

    //if the div is in the middle of an animation, do nothing
    if (!$("#mini_page").is(":animated")) {

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

    }

}, function() {

    //etc

});

修改现在我想到了，您可能想要使用.mouseenter()和.mouseleave()而不是hover（）

$('.comptext_rollover').mouseenter(function() { //your code }).mouseleave(function() { //your code });

Div使用fadeIn jQuery跳跃

3 个答案:

JSFIDDLE DEMO