Hình động không gian tên

Question

Có thể tạo hoạt ảnh không gian tên không? Cụ thể, vấn đề của tôi là trên một yếu tố nhất định $myElement Tôi đang làm hoạt ảnh của hai loại. Bây giờ tôi muốn sử dụng .stop() chỉ trên một trong các loại này, không phải cả hai.

Tôi có thể làm như thế nào?

EDIT

Mã sẵn ở đây: http://jsfiddle.net/y34ME/1/

Vấn đề của tôi là khi tôi nhấp vào span Tôi muốn nó biến mất, bất kể tôi làm một mouseout. Hiện tại, mouseout ngắt quãng mờ dần vì .stop(), nhưng tôi cần .stop() để ngăn các sự kiện mouseover và mouseout xếp hàng.

Answer 1

Tôi nghĩ điều bạn thực sự muốn là không kích hoạt hết chuột nếu bạn đã làm mờ phần tử. phương pháp Andrew hoạt động tốt, nhưng nếu bạn muốn giữ lại xử lý sự kiện của bạn còn nguyên vẹn (ví dụ, nếu có một cách để thể hiện yếu tố này một lần nữa), sử dụng một lớp nhà nước:

$('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

Có lý do nào bạn cần phải sử dụng ủy nhiệm không? Mã này dường như làm những gì bạn muốn:

$("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

Chỉ cần sử dụng chưa hoàn tác. Đối với mã sạch hơn, tất cả có thể được đóng gói trong một cuộc gọi đại biểu.

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

       });