上點擊

Question

拆散懸停鑑於此代碼（#stage是裏面一個div元素的錨標記）：

$('#stage').hover(

function() { 
    var $this = $(this); 
    $this.find('div').stop().animate({ 
     'width': '70px', 
     'height': '139px', 
     'top': '0px', 
     'left': '-16px' 
    }, 500); 
}, function() { 
    var $this = $(this); 
    $this.find('div').stop().animate({ 
     'width': '35px', 
     'height': '70px', 
     'top': '0px', 
     'left': '0px' 
    }, 500); 

}); 

（也發現在http://jsfiddle.net/fXp9U/1/）

在點擊我需要停止鏈接回吐我離開頁面並返回false，並將div設置爲活動狀態。當你點擊時，它不應該再動畫，但應該是懸停狀態的大尺寸。

如果您刪除了單擊事件，則懸停工作。

再次感謝您的幫助。

Answer 1

您可以使用綁定和取消綁定：

$('#stage').bind({ 
    'click': stage_onClick, 
    'mouseenter': stage_onMouseEnter, 
    'mouseleave': stage_onMouseLeave 
}); 

function stage_onClick(event) { 
    var $this = $(this); 
    $this.unbind('mouseenter', stage_onMouseEnter); 
    $this.unbind('mouseleave', stage_onMouseLeave); 
    event.preventDefault(); 
} 

function stage_onMouseEnter(event) { 
    var $this = $(this); 
    $this.find('div').stop().animate({ 
     'width': '70px', 
     'height': '139px', 
     'top': '0px', 
     'left': '-16px' 
    }, 500); 
} 

function stage_onMouseLeave(event) { 
    var $this = $(this); 
    $this.find('div').stop().animate({ 
     'width': '35px', 
     'height': '70px', 
     'top': '0px', 
     'left': '0px' 
    }, 500); 
} 

Answer 2

解除綁定事件使用off()，並防止連桿的默認操作（在鏈接JS Fiddle的#stage元件（在問題體）出現是一個a，不一個div）：

$('#stage').hover(
    function() { 
     var $this = $(this); 
     $this.find('div').stop().animate({ 
      'width': '70px', 
      'height': '139px', 
      'top': '0px', 
      'left': '-16px' 
     }, 500); 
    }, function() { 
     var $this = $(this); 
     $this.find('div').stop().animate({ 
      'width': '35px', 
      'height': '70px', 
      'top': '0px', 
      'left': '0px' 
     }, 500); 

    }).click( 
     function(e) { 
      // prevents the default action of the link 
      e.preventDefault(); 
      // animates the div element to the 'finished' position 
      $(this) 
      // unbinds the hover after a click 
      .off('hover') 
      // finds the child 'div' element, and prevents animation queueing 
      // (just as it did in your original code) 
      .find('div').stop() 
      // animates the div element to the 'finished' position 
      .animate({ 
       'width': '35px', 
       'height': '70px', 
       'top': '0px', 
       'left': '0px' 
      }, 500); 
     }); 

JS Fiddle demo。

參考文獻：

• off()。
• event.preventDefault()。