jQuery: क्लिक करें, माउसेंटर ईवेंट

Question

को रोकें मेरे पास दो अलग-अलग एनिमेशन हैं, जो पर click पर एक आग लगाती हैं। समस्या यह है कि जब वे दोनों सक्रिय होते हैं तो यह एक अजीब एनीमेशन बनाता है।

आप देख सकते हैं मैं यहाँ क्या मतलब है: JSFiddle

यह अगर click घटना सक्रिय होता है होने से mouseenter घटना को रोकने के लिए संभव है?

जावास्क्रिप्ट

$('header h1').mouseenter(function() { 
    $('header:not(.open)').delay(500).animate({ 
    'padding-bottom': '40px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

$('header h1').mouseleave(function() { 
    $('header:not(.open)').animate({ 
    'padding-bottom': '20px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

$('header h1').click(function() { 

    if ($('header').hasClass('open')) { 
    $('header p').fadeOut(100); 
    $('header').removeClass('open').animate({ 
     'padding-bottom': '20px' 
    }, 300, function() { 
     //animation complete 
    }); 
    } 

    else { 
    $('header').addClass('open').animate({ 
     'padding-bottom': '150px' 
    }, 300, function() { 
     $('header p').fadeIn(); 
    }); 
    } 

});​ 

Answer 1

सिर्फ यह करने के लिए आसान लगता है:

$('header').on({ 
    mouseenter: function(e) { 
     if (!$(this).is('.open')) { 
      $(this).stop(true, true).delay(500).animate({'padding-bottom': '40px' }, 150, function() { 
       //function complete 
      }); 
     } 
    }, 
    mouseleave: function(e) { 
     if (!$(this).is('.open')) { 
      $(this).stop(true, true).animate({'padding-bottom': '20px'}, 150, function() { 
      //function complete 
      }); 
     } 
    }, 
    click: function() { 
     if ($(this).is('.open')) { 
      $(this).find('p').fadeOut(100).end().removeClass('open').stop(true, true).animate({'padding-bottom': '20px'}, 300, function() { 
       //animation complete 
      }); 
     }else{ 
      $(this).addClass('open').stop(true, true).animate({'padding-bottom': '150px'}, 300, function() { 
       $('p', this).fadeIn(); 
      }); 
     } 
    } 
});​ 

Answer 2

नहीं, आप नहीं कर सकते हैं। विशेष रूप से क्योंकि ये घटनाएं एक-दूसरे पर आधारित होती हैं: किसी तत्व पर क्लिक करने के लिए, आपको इसे माउस से दर्ज करना होगा: आप enter ईवेंट को निष्क्रिय नहीं कर सकते हैं जो आपके द्वारा क्लिक किए जाने पर पहले से ही हुआ था। और आपको स्पष्ट रूप से प्रवेश करते समय भविष्य में click ईवेंट को निष्क्रिय नहीं करना चाहिए।

कूदने वाले एनिमेशन के साथ आपकी समस्या का समाधान stop() method होना चाहिए, जो चयनित तत्वों पर चल रहे एनिमेशन समाप्त होता है।

Answer 3

देरी के बाद open कक्षा की जांच के बारे में कैसे।

$('header h1').mouseenter(function() { 
    $.delay(500); 
    $('header:not(.open)').animate({ 
    'padding-bottom': '40px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

को

$('header h1').mouseenter(function() { 
    $('header:not(.open)').delay(500).animate({ 
    'padding-bottom': '40px' 
    }, 150, function() { 
    //function complete 
    }); 
}); 

से बदल रहा है जाहिर है आप-ट्यून कर सकते हैं अपनी पसंद के अनुसार देरी है, लेकिन विचार होगा कुछ की तरह:

अगर वे ऐसा नहीं करते x मिलीसेकंड से पहले क्लिक करें, पैडिंग बढ़ाएं।

Answer 4

लगता है जैसे आपको .stop() की आवश्यकता है।

अपने click घटना की शुरुआत करने के लिए इस जोड़ें:

$('header').stop(true) 

पहले पैरामीटर सच के लिए clearQueue है, जो अपने एनीमेशन कतार साफ हो जाएगा है।

यह jsFiddle देखें।