Question

我在页面上有四个图像，在悬停时，需要用与该图像相关的相关文本替换主文本。它工作但有问题。如果我慢慢翻滚并滚下来慢慢地，我得到了预期的效果。当我快速翻转时，两个div的内容都会显示出来。这是我需要做的事情的简化版本。

<img src="btn-open.gif" class="btn" />
<div class="mainText">
<h1>Main text</h1>
<p>Morbi mollis auctor magna, eu sodales mi posuere elementum. Donec lacus lorem, vestibulum sed luctus ac, tincidunt sit amet eros. Nullam tristique lectus lobortis nibh pharetra placerat. Aliquam quis tellus mauris. Quisque eu convallis elit. Sed vitae libero est. Suspendisse laoreet magna magna, vitae malesuada diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce eros ipsum, interdum et volutpat sed, commodo aliquam odio. Maecenas auctor condimentum mi. Maecenas ante eros, tristique nec viverra sed, molestie sit amet nulla. Suspendisse vitae turpis ac felis rutrum interdum.</p>
</div>
<div class="replacementText">
<h1>Replacement text</h1>
<p>Nulla ac magna nec quam cursus mollis eget a nulla! Vestibulum quis nibh ipsum, ut vehicula leo. Etiam ac felis suscipit mi semper vehicula. Praesent est mi, suscipit sit amet bibendum at, porta quis elit. Integer lectus est, consequat non sodales ac, pharetra sit amet tellus. Suspendisse porttitor massa a dolor suscipit sed ullamcorper ipsum vehicula. In malesuada augue sit amet ante volutpat euismod. Ut vel felis sed enim placerat ultricies. Aliquam erat volutpat. Vivamus rutrum; ante vitae euismod accumsan, felis odio lacinia magna, eu viverra nisl metus non ligula? In metus nisi, viverra vel scelerisque non, ullamcorper sed arcu? In hac habitasse platea dictumst. Donec laoreet dapibus quam vitae pulvinar. Morbi ut purus nisl. Nulla eu velit ipsum; vel mattis magna. Aenean sodales faucibus dapibus.</p> 
</div>


$(document).ready(function() {

$(".btn").hover(
function() {
    $(this).css({ cursor: "pointer" });
    $(".mainText").hide();
    $(".replacementText").slideDown("slow");
},
function() {
    $(".replacementText").hide();
    $(".mainText").slideDown("slow");

});

});

Answer 1

我建议在隐藏中插入延迟，例如：

var timeout;
$(document).ready(function() {
    $(".btn").hover(
        function() {
            clearTimeout(timeout)
            $(this).css({ cursor: "pointer" });
            $(".mainText").hide();
            $(".replacementText").slideDown("slow");
        },
        function() {
            timeout = setTimeout(function(){
            $(".replacementText").hide();
            $(".mainText").slideDown("slow");
            },250);
        });
});

Answer 2

隐藏元素时，您需要取消（.stop()）正在发生的相反幻灯片动画，以便在悬停更改时它们立即消失，如下所示：

$(".btn").hover(function() {
    $(".mainText").stop(true, true).hide();
    $(".replacementText").slideDown("slow");
}, function() {
    $(".replacementText").stop(true, true).hide();
    $(".mainText").slideDown("slow");
}).css({ cursor: "pointer" });

此外，我移动了.css()来电...你只看到cursor: pointer的结果仍然悬停，所以不需要每次都应用它，老实说这应该一直移到完全相同效果的样式表，如下所示：

.btn { cursor: pointer; }

jQuery fadeIn和fadeOut越野车图像悬停

2 个答案: