Question

在此页面上http://128.199.58.229/landingpage/每张图片的编码类似于

<span class="tribeimg">
<img src="images/tribes/img.jpg">
<p class="lt-tribe-name">Tribe Name</p>
</span>

我的CSS看起来像

.tribeimg img {
opacity: 0.7;
position: absolute;
left: 0;
top: 0;
}

.tribeimg .lt-tribe-name {
opacity: 0.7;
z-index: 11;
color: white;
position: absolute;
left: 32px;
bottom: 50px;
text-shadow: 1px 1px 8px black;
}

我正在使用Jquery来淡化不同的不透明度。

$(document).delegate('.tribeimg', 'mouseover', function() {
    $(this).children('img').fadeTo(333, 1);
    $(this).children('.lt-tribe-name').fadeTo(333, 1);
});

$(document).delegate('.tribeimg', 'mouseout', function() {
    $(this).children('img').fadeTo(333, 0.7);
    $(this).children('.lt-tribe-name').fadeTo(333, 0.7);
});

这种作品。但是在鼠标移动时有时图像闪烁。尝试快速移动鼠标以夸大闪烁。不知道为什么？我只想要一个淡入淡出。

如何解决？

感谢。

Answer 1

他们闪光是因为你没有停止动画。

尝试

$(document).delegate('.tribeimg', 'mouseout', function() {
    $(this).children('img').stop().fadeTo(333, 0.7);
    $(this).children('.lt-tribe-name').stop().fadeTo(333, 0.7);
});

Answer 2

每次将鼠标悬停在图像上时，都会将fadeTo事件添加到事件队列中。

使用stop（）停止正在进行的事件，以便事件不会叠加，从而为您提供闪烁效果。

$(this).children('img').stop()

Answer 3

$(document).delegate('.tribeimg', 'mouseover', function() {
    $(this).children('img').stop(true,true).fadeTo(333, 1);
    $(this).children('.lt-tribe-name').stop(true, true).fadeTo(333, 1);
});

$(document).delegate('.tribeimg', 'mouseout', function() {
    $(this).children('img').stop(true, true).fadeTo(333, 0.7);
    $(this).children('.lt-tribe-name').stop(true, true).fadeTo(333, 0.7);
});

用这个替换你的jQuery代码......它将解决你的问题。

Answer 4

您可以使用hoverIntent插件来阻止此行为，或使用jquery stop()

为什么图像会闪烁？

4 个答案: