/ / jquery हॉवर चालू और बंद करें - जावास्क्रिप्ट, jquery, css, html5

jquery होवर ऑन और ऑफ इश्यू - जावास्क्रिप्ट, jquery, सीएसएस, एचटीएमएल 5

मैं hover पर div को छिपाने और दिखाने के लिए jQuery का उपयोग कर रहा हूंइसके अभिभावक div की। यह काम करता है, लेकिन एकमात्र मुद्दा यह है कि जब आप कुछ समय के ऊपर और बाहर घूमते हैं तो वास्तव में यह जल्दी से अंदर और बाहर प्रत्येक फीका को ठीक कर देता है और जब तक आप माउस को चालू और बंद कर देते हैं तब तक इसे पूरा नहीं कर पाते हैं। देख : http://api.jquery.com/hover/#hover-handlerIn-handlerOut पहला उदाहरण यहाँ डेमो है अगर आपका होवर उन सभी पर वास्तव में जल्दी है तो आप देख सकते हैं कि मेरा क्या मतलब है

यहाँ मेरा कोड है, क्या किसी भी तरह से इसे और अधिक उपयोगकर्ता के अनुकूल बनाने के लिए और कई बार इसे स्वयं दोहराने के लिए कोई उपाय नहीं है?

    $(function () {
$(".hide").fadeOut("fast");

$( ".fourth" ).hover(
function() {
$( this ).find(".hide").fadeIn("slow"); ;
}, function() {
$( this ).find(".hide").fadeOut("slow");
}

);
<div class="fourth">
<div class="products">
<h4 class="hide"><a href="#">Laern More</a></h4>
</div>
</div>

उत्तर:

जवाब के लिए 5 № 1

पहले शुरू किए गए एनिमेशन को रोकने के लिए आपको .stop () फ़ंक्शन का उपयोग करना होगा:

$( ".fourth" ).hover(

function() {
$( this ).find(".hide").stop().fadeIn("slow"); ;
}, function() {
$( this ).find(".hide").stop().fadeOut("slow");
}

);

देखें jQuery .stop () प्रलेखन अधिक जानकारी के लिए।


उत्तर № 2 के लिए 1

उपयोग .stop() वर्तमान में चल रहे एनीमेशन को रोकने के लिए और .fadeToggle() कोड को सरल रखने के लिए।

$(".fourth").hover(function() {

$(this).find(".hide").stop().fadeToggle("slow");

});

The बेला.