/ / Sliding Animation, funktioniert nicht ganz perfekt - jquery, animation

Sliding Animation, funktioniert nicht ganz perfekt - Jquery, Animation

http://jsfiddle.net/UhNHW/

Ich versuche, einen Farbblock innerhalb eines kleinen Blocks hinter vorhandenen Inhalten einzufügen. Es ist problematisch, und ich muss ihn für mehrere Instanzen auf derselben Seite zum Laufen bringen.

Jede Hilfe wird geschätzt.

Antworten:

0 für die Antwort № 1

mit der maus so gehen lassen

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

Versuchen Sie dies für weitere Instanzen

  $(".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 für die Antwort № 2

Benutzen mouseenter und mouseleave Anstatt von mouseover und mouseout.

mouseout wird ausgelöst, wenn der Cursor ein anderes untergeordnetes Element des übergeordneten div eingibt.


1 für die Antwort № 3

ist das was du willst?

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

Ich prüfe grundsätzlich, ob .box2 wird animiert, wenn ja, kehre einfach ohne irgendetwas zurück.

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