एनीमेशन फिसलने, पूरी तरह से काम नहीं कर रहा है - jquery, एनीमेशन

http://jsfiddle.net/UhNHW/

मैं एक छोटे से ब्लॉक के अंदर मौजूदा सामग्री के पीछे स्लाइड करने के लिए एक रंग ब्लॉक प्राप्त करने की कोशिश कर रहा हूं। यह गड़बड़ है और मुझे इसे एक ही पृष्ठ पर कई उदाहरणों के लिए काम करने की आवश्यकता है।

किसी भी मदद की सराहना की है।

उत्तर:

माउस छुट्टी का उपयोग करें

   $(".container")
.mouseover(function (){
$(".box2").stop(true, true).animate({top:0}, 150);
})
.mouseleave(function (){
$(".box2").stop(true, true).animate({top:40}, 150);
})
;

अधिक उदाहरणों के लिए यह प्रयास करें

  $(".container").each(function() {
var c = $(this);
var box = c.find(".box2");

c.
mouseover(function (){
box.stop(true, true).animate({top:0}, 150);
})
.mouseleave(function (){
box.stop(true, true).animate({top:40}, 150);
});
});

उपयोग mouseenter तथा mouseleave के बजाय mouseover तथा mouseout.

mouseout जब अभिभावक माता-पिता के दूसरे बच्चे के तत्व में प्रवेश करता है, तो उसे ट्रिगर किया जाता है।

क्या ये वही है जो तुम चाहते हो?

http://jsfiddle.net/UhNHW/20/

मैं मूल रूप से एक जांच जोड़ता हूं कि क्या .box2 एनिमेटेड किया जा रहा है, यदि हां, तो बस बिना किसी चीज़ के वापस लौटें।

$(function() {
$(".container").on("mouseenter", function() {
var box = $(this).find(".box2");
if(box.is(":animated")) return false;
box.stop(true, true).animate({
top: 0
}, 150);
});
$(".container").on("mouseleave", function() {
var box = $(this).find(".box2");
if(box.is(":animated")) return false;
box.stop(true, true).animate({
top: 40
}, 150);
});
});​