2011-10-22 52 views
1

我有以下懸停腳本,它在我的導航鏈接圖片的工作原理:如何攔截jQuery中的不透明轉換?

$("nav a").hover(
    function() { 
     $(".current", this).animate({ 
      opacity: 1 
     }, { 
      duration: 300, 
      specialEasing: { 
       opacity: 'linear', 
      }, 
}); 
    }, function() { 
     $(".current", this).animate({ 
      opacity: 0 
     }, { 
      duration: 2000, 
      specialEasing: { 
       opacity: 'linear', 
      }, 

}); 
}); 

我想知道有,如果用戶將光標移動了懸停股利再放回它攔截動畫的方式在原始動畫完成之前。如果用戶將光標移回到div中,我希望動畫立即將.current div中圖像的不透明度淡入1。

我希望這是明確的,並會很樂意提供任何幫助。

感謝,

尼克

回答

2

您可以使用jQuery的stop()功能(info)取消動畫。該輸入功能的第一行改成這樣:

$(".current", this).stop().animate({ 

這將停止動畫並立即返回不透明度爲1

+0

非常感謝,Nathan。這工作正常。 – Nick

0

我已經在過去完成像這樣的方法是通過存儲引用一個對象中的懸停元素,通過某種與元素相關的ID關閉。

例如:

var hoveredElements = {previousId:null}; 
$("nav a").bind("mouseover mouseout",function(e) { 
      if(e.type == "mouseover") 
      { 

       if(!hoveredElements.hasOwnProperty(this.id)) 
       { 
       hoveredElements[this.id] = $(".current", this).animate({opacity: 1},300); 
       hoveredElements.previousId = this.id; 
       } 
       else if(hoveredElements.previousId == this.id) 
       { 
       if(hoveredElements.hasOwnProperty(this.id)) 
       { 
        hoveredElements[this.id].stop().css({opacity:1}); 
       } 
       else 
       { 
        hoveredElements[this.id] = $(".current", this).css({opacity:1}); 
       } 
       } 
      } 
      else 
      { 
      if(hoveredElements.hasOwnProperty(this.id)) 
      { 
       hoveredElements[this.id].animate({opacity: 0},2000,function(){ 
        delete hoveredElements[this.id]; 
       }); 
      } 
      } 
}); 

課程的ID不必是HTML ID,只是一些唯一標識符(可以是元件本身)。

編輯:對不起,沒有完全得到原來的問題!