使用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);
 });

Live DEMO