$(function() {
$('#wrap').hover(
function() {
$('#wrap .image').fadeOut(100, function() {
$('#wrap .text').fadeIn(100);
});
},
function() {
$('#wrap .text').fadeOut(100, function() {
$('#wrap .image').fadeIn(100);
});
}
);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrap">
<div class="image">
<img src="http://example.com/images/image.png">
</div>
<div class="text hide">
<p>Text text text</p>
</div>
</div>
我有两个div(其中一个隐藏在CSS中),我在悬停时在一个公共空间内交替交替淡入和淡出。
而且我正在应用此jQuery代码淡出图像-并在悬停时淡入文本中
但是问题是文本div变得发粘并且不会淡出-始终是鼠标移动太快。
您知道这在哪里可以解决吗?
我设置了在线测试:http://paragraphe.org/stickytext/test.html
感谢您的小费
如果包装纸上没有宽度和高度,则一旦移除图像元素,它就会缩小,可能会得到一些奇怪的结果。要查看,请在包装纸周围添加边框和固定的高度/宽度。或者至少对图像和文本div使用相同的高度。
<style type="text/css">
#wrap { width: 200px; height: 200px; border: 1px solid black; }
</style>
编辑
删除了不适用于您要完成的代码的示例。
在悬停功能上尝试使用。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队列是每个元素的,所以我在这里要做的是在de image queue下启动文本效果。
然后我再给你一个建议。如果您打算将此效果应用于各种图像,请使用class而不是id。
...
$('.wrap').hover(
function(){
var wrap = this;
$('.image', wrap).stop(true).fadeOut(100);
$('.image', wrap).queue(function(){
$('.text', wrap).fadeIn(100);
$(this).dequeue();
});
....
这样,您只需要调用一次。
您的代码永远不会淡出text div。悬停事件的两个功能将使图像淡出并在文本中淡出。
[两个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 / mouseleave事件,因为它们似乎在详细处理要处理的div(as seen here),但没有任何改变。因此,看到所有常用的jQuery指令均未响应,我已经按照建议的CSS签出了。
有窍门。
我所拥有的:
.text p{position:relative; top:-370px; padding: 0 10px}
设置了一个巨大的空白区域,浏览器将其解释为游标被光标“不停”(我注意到飞越那个空白区域使文本能够正确响应)。
所以我改成那个:
.text {margin-top:-370px; padding: 0 10px; float:left}
哪个让“ p”标记单独放置,并将第二个块放置在div中,但后面没有一丝空白。
然后,关于代码段,它也可以与mouseenter / moseleave和hover一起使用:
<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>