为什么图像会闪烁？答案

【问题标题】：Why are the images flashing?为什么图像会闪烁？
【发布时间】：2014-12-02 09:34:23
【问题描述】：

在这个页面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);
});

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

如何解决？

谢谢。

【问题讨论】：

Demo 位于问题顶部的 URL：128.199.58.229/landingpage
你为什么使用delegate函数？它已被弃用，最好改用 on 函数
感谢已从“代表”更新为“开启”。我从另一个 stackoverflow 问题中得到了这个函数。一定是很久以前的了。

标签： jquery css

【解决方案1】：

$(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 代码......它会解决你的问题。

【讨论】：

不，不会。将两个参数都设置为 true 会使动画立即跳转到结尾。这种行为肯定不看起来不错。

【解决方案2】：

它们闪烁是因为您没有停止动画。

试试

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

【讨论】：

【解决方案3】：

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

使用 stop() 停止正在进行的事件，这样事件就不会堆积起来给你闪烁的效果。

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

【讨论】：

【解决方案4】：

您可以使用hoverIntent 插件来防止这种行为，或使用jquery stop()

【讨论】：