/ / Animation coulissante, ne fonctionne pas tout à fait parfaitement - jquery, animation

Animation glissante, ne fonctionne pas parfaitement - jQuery, animation

http://jsfiddle.net/UhNHW/

J'essaie de faire glisser un bloc de couleur derrière le contenu existant à l'intérieur d'un petit bloc. Il est glitch et je dois le faire fonctionner pour plusieurs instances sur la même page.

Toute aide est appréciée.

Réponses:

0 pour la réponse № 1

utiliser la souris comme ça

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

pour plus d'exemples essayez ceci

  $(".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 pour la réponse № 2

Utilisation mouseenter et mouseleave au lieu de mouseover et mouseout.

mouseout est déclenché lorsque les curseurs entrent dans un autre élément enfant de la div parent.


1 pour la réponse № 3

c'est ce que tu veux?

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

J'ajoute essentiellement un chèque si .box2 est en cours d'animation, si c'est le cas, revenez sans rien.

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