javascript - 图像上的 Flash 文字效果

Question

问题是，当我将鼠标悬停在图像上时效果很好，但如果我将鼠标悬停在标题上，它就会闪烁。示例:http://www.adminvps.com.ar/trabajos/sofi_v/pintura.html

小米密码是:

$(document).ready(function () {
    $('.item a img').hover(function () {
    	id = '.' + $(this).attr("id");
        $(this).stop().animate({
            opacity: .2
        }, 200);
        $(id).removeClass('hide');
    }, function () {
        $(this).stop().animate({
            opacity: 1
        }, 500);
        $('.text').addClass('hide');
    });
});

.text {
    z-index: 1;
    position: absolute;
    color: #000000;
    margin: 30px 0px 0px 30px;
    font-weight: bold;
    font-size: 13px;
    line-height: 18px;
}

.text span {
    color: #808080;
}

.hide {
    display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="item">
	<div class="id1 text hide">Title <br /> texto</div>
	<a href="#"><img id="id1" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" /></a>
</div>
<br />
<div class="item">
	<div class="id2 text hide">Title <br /> texto</div>
	<a href="#"><img id="id2" src="http://www.adminvps.com.ar/trabajos/sofi_v/example.jpg" alt="" style="max-width: 500px;" /></a>
</div>

知道如何移除闪光灯吗？谢谢

Answer 1

这也可以通过使用 CSS3 transitions 来实现(纯 CSS，无 JS)

这是 fiddle我只是根据您的代码编写了一个工作示例。

这些是添加到它的行:

.item img {
    -webkit-transition: opacity 500ms;
    transition: opacity 500ms;
    opacity: 1;
}

.item:hover img {
    opacity: 0.2;
    -webkit-transition: opacity 200ms;
    transition: opacity 200ms;
}

.item:hover .hide {
    display: block;
}

我不得不指向 img 而不是整个 div (.item)，因为文本的不透明度也越来越低。

希望对你有帮助。