jQuery淡出效果不平滑动画

Question

我正在使用jQuery的.fade()方法来在鼠标悬停时隐藏一个元素，并在鼠标移出时重新显示它，但是当我运行.fadeOut()方法时，无论我输入什么持续时间，或者是否将其保留为默认值，它都会等待持续时间，然后（消失）立即出现，而不是在持续时间内缓慢地淡出/淡入。 我使用的是最新版本的Chrome浏览器。 有人遇到过这种情况吗？

$(document).ready(function(){
    $(".navbutton").hover(
        function() {
            $('span.linktext, span.linkdropcap').fadeOut();
        },
        function() {
            $('span.linktext, span.linkdropcap').fadeIn();
        }
    );
});

其他浏览器也出现了相同的问题。

参见此jsFiddle：http://jsfiddle.net/TXrDk/

- user1119648

---

我最近接手了一个使用了很多动画效果的项目，发现在Chrome浏览器中存在很多问题。令人惊讶的是，Firefox和IE没有出现这些问题。你在这两个浏览器中有什么样的体验？ - Brian Vanderbusch

你能否在 http://jsfiddle.net/ 上发布一个示例来说明问题？ - Anderson Green

在Firefox中运行良好。 - simonzack

抱歉，没有完全阅读问题。我在Chrome上也遇到过这个问题。您可以尝试手动执行 $（'span'）.animate（{opacity：0}，600） 淡出，这在我的情况下有所帮助。 - Casey Dwayne

Answer 1

将这部分内容从您想要淡化的元素中删除，它就可以正常工作。例如：jsfiddle

transition:.5s ease-in-out;

- James

---

好的，了解到CSS过渡参数会影响jQuery动画。 - user1119648

我一直在为客户的网站和jQuery转换不流畅而苦恼。原来这整个问题都是因为上一个开发者放置了 *{transition: all .2s;}。 - baacke

天啊，就是这样，这就是为什么我的淡入淡出效果不够平滑，太感谢了！ - Deadpool