jQuery एनीमेशन: एनिमेटिंग रोकें एक बार माउस आउट

Question

मैं स्लाइड करने के लिए div बनाने की कोशिश कर रहा हूं और होवर i.e. माउस क्रमशः दर्ज और छोड़ देता हूं। हालांकि, जब मैंने कई बार अंदर और बाहर आच्छादित किया, तो div मूल रूप से होवर के समय तक मूल रूप से आगे बढ़ रहा था। कृपया इस jsFiddle example देखें।

जैसा कि आपने शायद अनुमान लगाया है, मैं माउस के तत्व के बाहर होने के बाद div स्टॉप (यानी स्लाइड किया गया) बनाने की उम्मीद कर रहा हूं, भले ही मैंने इसे कितनी बार देखा है। मुझे लगता है कि jQuery एनीमेशन के बारे में मेरी समझ में कुछ याद आ रही है।

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).animate({ left: "-270" }, 500); 
}); 

धन्यवाद।

Answer 1

आपको jQuery .stop() function की आवश्यकता है। किसी भी चल रहे एनिमेशन को बाधित करने के लिए, एक नई एनीमेशन शुरू करने से पहले इसे अपने कमांड चेन में डालें।

$('#state-slider').hover(function() { 
    $(this).stop().animate({ left: 0 }, 500); 
}, function() { 
    $(this).stop().animate({ left: -270 }, 500); 
}); 

Working jsFiddle =)

Answer 2

$("#state-slider").hover(function() { 
    $(this).animate({ 
    left: '0' 
    }, 500); 
}, function() { 
    $(this).stop(true,true).animate({ left: "-270" }, 500); 
}); 

DEMO

http://api.jquery.com/stop/

Answer 3

वहाँ एक उदाहरण

http://jsfiddle.net/amkrtchyan/TQz5U/1/

है

और jQuery कोड

$(function() { 
    $("#state-slider").hover(function() { 
     $(this).stop(true,true).animate({ 
      left: '0' 
     }, 500); 
    }, function() { 
     $(this).stop(true,true).animate({ left: "-270" }, 500); 
    }); 
});