命名空間動畫

Question

命名空間動畫是否可能？具體來說，我的問題是，在給定的元素$myElement我正在做兩種類型的動畫。現在我只想在這些類型中的一個上使用.stop()，而不是兩者。

我該怎麼做？

編輯

代碼可在這裏：http://jsfiddle.net/y34ME/1/

我的問題是，當我點擊span我希望它消失，不管我是否做了mouseout。目前，mouseout因爲.stop()而中斷了消失，但我需要.stop()來阻止mouseover和mouseout事件排隊。

Answer 1

我想你真正想要的是不要觸發mouseout，如果你已經褪去了元素。安德魯的方法效果很好，但如果你想保持你的事件處理程序不變（例如，如果有再次顯示該元素的方式），使用狀態類：

$('p').delegate('span:not(.hidden)', { 
    'mouseover': function() { 
     $(this).stop(true, true).animate({backgroundColor: 'blue'}, 1000); 
    }, 
    'mouseout':function() { 
     $(this).stop(true, true).animate({backgroundColor: 'white'}, 1000); 
    }, 
    'click': function() { 
     $(this).addClass('hidden').stop(true, true).animate({backgroundColor: 'green'}, 1000).fadeTo(2000, 0); 
    } 
}); 

http://jsfiddle.net/y34ME/4/

Answer 2

是否有理由需要使用委託？此代碼似乎是做你想做的：

$("span").hover(
    function() { 
     $(this).animate({backgroundColor: "blue"}, 1000); 
    }, 
    function() { 
     $(this).animate({backgroundColor: "white"}, 1000); 
    } 
); 

$("span").click(function() { 
    $(this).animate({backgroundColor: "green"}, 1000).fadeTo(2000, 0); 
}); 

Answer 3

只要使用undelegate。爲了更簡潔的代碼，它也可以封裝在一個委託調用中。

$('p').delegate('span',{ 
       'mouseover':function(e){ 
     $(this).stop(true, true).animate({backgroundColor: 'blue'}, 1000); 
       }, 
       'mouseout':function(e){ 
     $(this).stop(true, true).animate({backgroundColor: 'white'}, 1000); 
       }, 
       'click':function(e){ 
     $(this).animate({backgroundColor: 'green'}, 1000).fadeTo(2000, 0).undelegate('mouseout'); 
       } 

       });