Question

我正在使用.fadeIn和.fadeOut并且可以使效果发生一次，问题是每次链接被覆盖时都会发生这种情况。我试过滴入.deQueue（）和.stop（）无济于事。（newb在这里，所以请在你的解释中保持耐心和彻底 - 我的头脑还有很多）

<!DOCTYPE html>
<html>
<head>

<style>
p { position:relative; width:400px; height:90px; }
div {
position:fixed;
padding-top:25px;  
top:300px;
left:300px;
display:none;
}
span { display:none; } 
</style>

<script type="text/javascript" src="jQuery.js"></script>

</head>

<body>

<a href="#">MouseOver!</a>

<h3><div><span>Sample Text</span></div></h3>

<script>
$("a").mouseover(function () { 
$("div").fadeIn(0, function () { 
$("span").fadeIn(3000);
}); 
return false; 
});  

$("a").mouseout(function () { 
$("h3").fadeOut(3000);
});

</script>

</div>
</body>
</html>

Answer 1

那是因为你正在淡化这些元素，但却没有改变mouseout上的可见状态。您可以将hover事件与单个函数一起使用，以实现所需的行为。

$("a").hover(function() {
    $("div").fadeToggle(3000);
    return false;
});

Answer 2

看起来你正在褪色div并跨越两者。如果你正在淡化任何元素，那么子元素也会褪色。试试这个

$("a").mouseover(function () { 

   $("div").fadeIn(3000); 
   return false; 

}).mouseout(function () { 
   $("div").fadeOut(3000);
});

Answer 3

这是你的选择器。你在一个跨度中消失但淡出了一个h3。因此，含有h3的东西永远不会消失。

你需要

$("span").fadeIn(3000);
...
$("span").fadeOut(3000);

Answer 4

当然它只运行一次，你在div和跨度中消失，但你淡出了h3。你的标记也毫无意义。考虑一下这种改进：http://jsfiddle.net/RikudoSennin/gRAGe/

它包含jQuery和HTML改进。请仔细阅读并考虑使用这个更好的例子。

Answer 5

因为你正在淡出父元素h3当你隐藏它时，你不能淡出其他元素。你的div也开始隐藏，强制你显示它以便在范围内淡入淡出。老实说，只需将标记更改为更简单的标记，或者至少删除一层隐藏元素。

如果您从css中的div中删除dispay : none，则可以使用以下内容。

<强> Live Demo

$("a").hover(function(){
        $("span").fadeIn(300);
},function(){
        $("span").fadeOut(300);
});

此外，它更容易使用 hover ，因为您可以控制一种方法中发生的情况。

jQuery效果一次，但我需要重复

5 个答案: