नामकरण एनिमेशन

Question

क्या एनिमेशन नामों को नामित करना संभव है? विशेष रूप से, मेरी समस्या यह है कि किसी दिए गए तत्व पर $myElement मैं दो प्रकार के एनिमेशन कर रहा हूं। अब मैं इन प्रकारों में से केवल एक पर .stop() का उपयोग करना चाहता हूं, दोनों नहीं।

मैं यह कैसे कर सकता हूं?

संपादित

कोड यहाँ उपलब्ध है: http://jsfiddle.net/y34ME/1/

मेरे समस्या यह है कि जब मैं span क्लिक मैं इसे दूर नहीं हो पाती हैं, चाहे मैं एक mouseout कर की परवाह किए बिना है। वर्तमान में, mouseout.stop() की वजह से लुप्तप्राय को बाधित करता है, लेकिन mouseover और mouseout ईवेंट को कतार में रोकने के लिए मुझे .stop() की आवश्यकता है।

Answer 1

मुझे लगता है कि आप वास्तव में क्या चाहते हैं माउसआउट को ट्रिगर नहीं करना है यदि आप पहले ही तत्व को दूर कर रहे हैं। एंड्रयू विधि अच्छी तरह से काम करता है, लेकिन आप अपने ईवेंट हैंडलर्स बरकरार रखना चाहते हैं (उदाहरण के लिए, वहाँ इस तत्व फिर से दिखाने के लिए एक तरीका है), एक राज्य वर्ग का उपयोग करें:

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

       });