如何阻止这个jQuery出错？

-1

所以我想创建一个有两层的盒子：前一层和后一层。它们将堆叠在彼此的顶部，因此背层默认隐藏。如何阻止这个jQuery出错？

当您将鼠标悬停在方框的顶部（技术层）时，前层应该向上滑动以显示背层。我试图通过使用.slideUp()和.slideDown()来做到这一点，但它一直在窃取同时显示两个图层。所以然后我切换到.slideUp()和.fadeIn()但这似乎没有太多的帮助。

正如你所看到的，它有时会同时显示的div时，它不应该，它也滑多次随机。我怎么能让这更高效？

这里是一个JsFiddle

UPDATE：

问题寻求帮助调试（ “为什么不是这个代码的工作？”）必须包括所期望的行为，一个特定的问题或错误以及在问题本身中重现它所需的最短代码。没有明确问题陈述的问题对其他阅读器无用。

这就是人们投票结束这个答案的原因......从这个列表中，这个问题没有什么？

Desired behavior? - Check 
Specific problem? - Check 
Shortest code necessary? - Check 
Clear problem? - check

来源

2016-09-24 ProEvilz

护理解释downvote？脚本几乎可以工作，只需调整即可。 – ProEvilz

您应该在您的问题中包含小时代码，而不仅仅是小提琴的链接。 –

为什么？把它放到两个帖子里似乎是反作用的。 – ProEvilz

你并不真的需要使用效果基本show和了slideDown，您可以通过使用转换和过渡CSS3实现幻灯片效果属性。

更新JS提琴：https://jsfiddle.net/9uw2q24h/3/

的Javascript：

$('.outer').hover(function() { 
    $(this).children('.front').addClass('front-up'); 
}, function() { 
    $(this).children('.front').removeClass('front-up'); 
});

CSS：

.outer { 
    position: relative; 

    .front, 
    .back { 
    text-align: center; 
    width: 100%; 
    } 
    .back { 
    display: block; 
    } 
    .front { 
    position: absolute; 
    transition: 0.5s ease; 
    } 
    .front-up { 
    transform: translateY(-100%); 
    } 
}

如果你要支持旧的浏览器，确保供应商的前缀添加到转换和转换规则（-webkit-，-moz-等）。

来源

2016-09-24 21:52:48 Brunt

不错的解决方案，但我会在样式中添加'.well'类，并为其提供一个“margin-bottom：0”来保证稳定性。 – Daniel

你可以做到这一点，如：

var running = false; 
$('.outer').hover(function() { 
    if (!running) { 
    running = true; 
    $(this).children('.front').slideUp(function() { 
     $(this).next('.back').slideDown(function() { 
     running = false; 
     }); 
    }); 
    } 
}, function() { 
    if (!running) { 
    running = true; 
    $(this).children('.back').slideUp(function() { 
     $(this).prev('.front').slideDown(function() { 
      running = false; 
     }); 
    }); 
    } 
});

说明：只要动画开始保存状态在一个变量，以避免冲突（否则会被再次调用）。此外与slideDown和slideUp相结合，你有一个更平滑的动画。你有一个不是很好的闪烁与您的fadeOut组合slideDown

小提琴：https://jsfiddle.net/dL7ckq6b/

来源

2016-09-24 21:51:25

通过对CSS进行轻微调整，特别是使元素的position属性为绝对值，将会使您的back元素从头开始位于前方元素后面，现在只需显示/隐藏前方元素。

的Javascript：

$('.outer').hover(function() { 
$('.front').slideUp(); 
    console.log("IN"); 
}, function() { 
    $('.front').slideDown(); 
    console.log("OUT"); 
});

我也更新CSS更清楚地显示发生的效果。

CSS：

.outer { 
    .front, 
    .back { 
    text-align: center; 
    position: absolute; 
    padding: 20px 10px; 
    border: 2px solid yellow; 
    } 

    .front { 
    z-index: 10; 
    background-color: red; 
    } 

    .back { 
    z-index: 0; 
    background-color: blue; 
    } 
}

这里是的jsfiddle：https://jsfiddle.net/z8e7eb4b/

来源

2016-09-24 22:05:54

如何阻止这个jQuery出错？

回答

相关问题