我有两个div（其中隐藏着CSS中的一个），其中我淡入淡出在alternance一个共同的空间内，悬停。
这是该标记：
<div id="wrap">
<div class="image">
<img src="http://domain.com/images/image.png">
</div>
<div class="text hide">
<p>Text text text</p>
</div>
</div>
而我申请这个jQuery代码淡出图像 - 并在文本褪色，悬停：
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap .text').fadeIn(100);
});
},
function(){
$('#wrap .text').fadeOut(100, function(){
$('#wrap .image').fadeIn(100);
});
}
);
});
</script>
但问题是，文本DIV变粘，不会淡出 - 总是鼠标移动太快。
你知道它在那里可以解决这个？
我建立了一个在线测试： http://paragraphe.org/stickytext/test.html
感谢您的任何提示
如果包装上没有它的宽度和高度可能会得到一些奇怪的结果，因为它一旦缩小图像元素被删除。 要查看，添加边框和固定高度/宽度周围的包装。 或至少使用的图片和文字的div相同的高度。
<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>
EDITED
删除的代码示例并不适用于你要完成的任务。
尝试使用.stop（）在你的悬停输出功能，这将防止竞争条件，你快速将鼠标移到的div
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap.text').fadeIn(100);
});
},
function(){
$('#wrap.text').stop().fadeOut(100, function(){
$('#wrap.image').stop().fadeIn(100);
});
}
);
});
</script>
尝试使用队列：
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').stop(true).fadeOut(100);
$('#wrap .image').queue(function(){
$('#wrap.text').fadeIn(100);
$(this).dequeue();
});
},
function(){
$('#wrap .image').stop(true).queue(function(){
$('#wrap.text').fadeOut(100);
$(this).dequeue();
});
$('#wrap .image').fadeIn(100);
}
);
});
</script>
jQuery的队列每个元素，所以我想在这里做的是推出去图像队列下的文字效果。
让我给你一个建议。 如果你的意图是各种图像使用类，而不是ID来应用这个效果。
...
$('.wrap').hover(
function(){
var wrap = this;
$('.image', wrap).stop(true).fadeOut(100);
$('.image', wrap).queue(function(){
$('.text', wrap).fadeIn(100);
$(this).dequeue();
});
....
这样，你只需要一次调用它。
你的代码永远不会淡出文字股利。 悬停事件的两个功能将淡出图像和文字褪色。
你有两个相同的代码hover功能。 你不应该替换第二种情况下的选择？
<script type="text/javascript">
$(function(){
$('#wrap').hover(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap.text').fadeIn(100);
});
},
function(){
$('#wrap.text').fadeOut(100, function(){
$('#wrap.image').fadeIn(100);
});
}
);
});
</script>
感谢所有的提示 ：
我试图用的mouseenter /鼠标离开的事件，因为他们似乎详细地寻找他们正在处理（的div 这里看到的 ），但什么都没有改变。 所以看到的是所有常用的jQuery的说明并没有回应我已经签出的建议我的CSS。
并有诀窍。
我有什么：
.text p{position:relative; top:-370px; padding: 0 10px}
是设置了一个巨大的，空的空间，浏览器被解释为“没有离开还是”光标（我注意到，该飞过空的空间正在作出正确的回应文字）。
所以我改变为：
.text {margin-top:-370px; padding: 0 10px; float:left}
因为只有让“P”标签，并定位在div第二块了，但没有它背后空白痕迹。
随后，有关片段，它将与的mouseenter / moseleave和悬停以及工作：
<script type="text/javascript">
$(function(){
$('#wrap').mouseenter(
function(){
$('#wrap .image').fadeOut(100, function(){
$('#wrap .text').fadeIn(100);
});
}
);
$('#wrap').mouseleave(
function(){
$('#wrap .text').fadeOut(100, function(){
$('#wrap .image').fadeIn(100);
});
}
);
});
</script>
这是改良版http://paragraphe.org/nice/test.html
