/ / Animação deslizante, não está funcionando perfeitamente perfeitamente - jquery, animação

Animação deslizante, não funciona perfeitamente - jquery, animação

http://jsfiddle.net/UhNHW/

Estou tentando fazer com que um bloco colorido deslize por trás do conteúdo existente dentro de um pequeno bloco. É um problema e preciso que ele funcione para várias instâncias na mesma página.

Qualquer ajuda é apreciada.

Respostas:

0 para resposta № 1

use mouse deixar assim

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

para mais instâncias, tente isso

  $(".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 para resposta № 2

Usar mouseenter e mouseleave ao invés de mouseover e mouseout.

mouseout é acionado quando os cursores entram em outro elemento filho da div pai.


1 para resposta № 3

É isso que voce quer?

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

Basicamente, adiciono uma verificação se .box2 está sendo animado, se sim, basta retornar sem nada.

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