/ / Przesuwna animacja, niezupełnie działająca - jquery, animacja

Przesuwna animacja, niezupełnie działająca - jquery, animacja

http://jsfiddle.net/UhNHW/

Próbuję uzyskać blok koloru, który przesunie się za istniejącą zawartość wewnątrz małego bloku. Jest błędny i muszę go uruchomić w wielu instancjach na tej samej stronie.

Każda pomoc jest doceniana.

Odpowiedzi:

0 dla odpowiedzi № 1

użyj myszki w ten sposób

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

dla większej liczby przypadków spróbuj tego

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

3 dla odpowiedzi № 2

Posługiwać się mouseenter i mouseleave zamiast mouseover i mouseout.

mouseout jest uruchamiany, gdy kursory wchodzą w inny element podrzędny rodzica div.


1 dla odpowiedzi nr 3

czy to jest to, czego chcesz?

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

Zasadniczo dodaję sprawdzenie, czy .box2 jest animowany, jeśli tak, po prostu wróć bez niczego.

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