jquery - 使用 jQuery 改变不透明度的问题

Question

我有这段代码，它通过淡化不透明度来将焦点集中在导航栏元素上mouseover

这里是：

$("#Nav-bar").mouseover(function(){
    $(".content").animate({opacity: 0.3,}, 350 );
}).mouseout(function(){
    $(".content").animate({opacity: 1.0,}, 350 );
});

这里的问题是页面在沿着元素浏览时不断进出效果。例如，当我悬停链接时，页面会淡出然后再次出现。我该如何阻止这个？

jsFiddle

Answer 1

使用 jQuery 的stop函数来发布之前的动画。

 $("#Nav-bar").mouseover(function () {
     $(".content").stop(true).animate({
         opacity: 0.3,
     }, 350);
 }).mouseout(function () {
     $(".content").stop(true).animate({
         opacity: 1.0,
     }, 350);
 });

现场演示