命名空间动画

Question

是否可以命名动画?具体来说，我的问题是，在给定的元素$myElement上，我正在做两种类型的动画。现在我只想在其中一种类型上使用.stop()，而不是同时使用。

我该怎么做呢?

编辑

代码可在此获得:http://jsfiddle.net/y34ME/1/

我的问题是，当我点击span我希望它消失，不管我是否做一个mouseout。目前，mouseout由于.stop()而中断了衰落，但我需要.stop()来防止mouseover和mouseout事件排队。

Answer 1

我认为您真正想要的是，如果您已经淡出元素，则根本不触发mouseout。Andrew的方法工作得很好，但是如果您希望保持事件处理程序的完整性(例如，如果有办法再次显示此元素)，请使用状态类:

$('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' );
                }
                });