Анімація ковзання, не зовсім ідеально працює - 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);
});
});​