当相邻图像使用 jQuery 设置动画时，Safari 中的文本消失

Question

项目主列表 on this page 中的文本在快速滚动 over/off 文本时消失。

我不明白为什么它只发生在 Safari 中？（它在 Chrome/Firefox...甚至在 IE9 中都很好）

谢谢！

    function projectImageRollovers() {
    $('#projects li a').mouseenter(function() {
        // if($('ul#work-menu').hasClass('desktop')) {
        if($(window).width() > 768) {
            $(this).parent().stop().find('.project-thumb').fadeTo("fast", 0.4);
        }
    });
    $('#projects li a').mouseleave(function() {
        $(this).parent().stop().find('.project-thumb').fadeTo("fast", 0);
    });
}
projectImageRollovers();

Answer 1

您可以尝试使用纯 CSS 而不是 Javascript:

#projects li img {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

#projects li:hover img {
  opacity: 0.4;
}

当相邻图像使用 jQuery 设置动画时，Safari 中的文本消失

Text disappearing in Safari when adjacent image animated with jQuery

css

jquery

animation

text