我的意图是用漂亮的淡化效果替换图像: 我有一个图像A作为背景。鼠标悬停时,图像B淡入。 在鼠标输出时,图像B fadeOut,我们可以再次看到图像A. 我正在使用此代码:
<script type='text/javascript'>
$(function() {
$("img.fade")
.mouseover(function() {
$(this).fadeOut(2000);
})
.mouseout(function() {
$(this).fadeIn(2000);
});
});
</script>
但问题是当用户停留在悬停时,它会继续循环(fadeIn,fadeOut,fadeIn,fadeOut ..)。我希望它在褪色结束时保持不变。当用户将鼠标移出时,我就想要新的淡入淡出。 谢谢!
P.S 这是使用2张图像的工作代码。这是问题的不同解决方案,我在解决问题后对此进行了广告宣传。
<script type='text/javascript'>
$(function() {
$('img.fade').hover(function() {
var src = $(this).attr("src").match(/[^\.]+/) + "_over.jpg";
$(this)
.animate({opacity:0},0)
.attr('src',src)
.stop()
.animate({opacity:1},1000);
}, function() {
var src = $(this).attr("src").replace("_over", "");
$(this)
.animate({opacity:0},0)
.attr('src',src)
.stop()
.animate({opacity:1},500);
});
});
</script>
答案 0 :(得分:0)
试试这段代码:
$(function() {
$("img.fade")
.mouseover(function() {
$(this).fadeTo('2000', 0);
})
.mouseout(function() {
$(this).fadeTo(2000, 1);
});
});
问题是fadeOut()函数将元素的display属性设置为none,因此DOM认为鼠标不再与元素交互,并调用fadeIn()函数。它不断循环。 fadeTo函数改变了不透明度,但它实际上并没有使图像成为一种方式。它需要两个参数,持续时间和不透明度。
答案 1 :(得分:0)
对我来说,一旦淡出图像就会消失,这会触发鼠标输出功能。尝试动画为.01不透明度。
答案 2 :(得分:0)
$(function() {
var img = ['imageA.jpg','imageB.jpg']
$('img.fade').hover(function() {
$(this)
.animate({opacity:0},0)
.attr('src',img[1])
.stop()
.animate({opacity:1},1000);
}, function() {
$(this)
.animate({opacity:0},0)
.attr('src',img[0])
.stop()
.animate({opacity:1},1000);
});
});
您可以尝试 here
答案 3 :(得分:0)
如果您不想动态切换图像,并且真的想要继续使用背景图像,您可以利用事件冒泡...
<强> HTML 强>:
<div class="myClass" style="background: url(imageA.jpg);">
<img src="imageB.jpg" />
</div>
jQuery :
$('.myClass').hover(function(){
$(this).find('img').fadeOut(2000);
}, function(){
$(this).find('img').fadeIn(2000);
})
未经测试,请告知我们是否有效。
答案 4 :(得分:0)
对于其他人也来这里领导
Google+(Ignorance||rum) = me.
mouseenter + mouseleave可能有助于您认为可能有效的奇怪的半循环行为,例如
var someElements = $('div.event-cell');
someElements.mouseenter(function () {
var targets= calEvents.not(this);
targets.fadeTo(1000, 0.3);
}).mouseleave(function () {
var targets = someElements.not(this);
targets.fadeTo(1000, 1);
});
似乎鼠标悬停和鼠标移动比你想象的更具包容性,例如mouseout包含子元素。
I think = layman's opinion after rum :)