在動畫後重置

Question

我配置了following animation淡入淡出，並在「鼠標懸停」中將其滑動到視圖上，僅用於淡出並在「鼠標懸停」上再次滑動。但是，如果我再次將鼠標移回容器DIV上，同一個動畫將繼續，但從錯誤的位置開始。我如何讓它重新回到起始位置？如果可能的話，我想避免添加另一個動畫以將其移回原始位置。

$(".box").css("opacity",0); 
    $(".container").mouseover(function() { 
     $(".box").stop(true, true).animate({top:99, opacity: 1},150); 
    }); 
    $(".container").mouseout(function() { 
     $(".box").stop(true, true).animate({top:59, opacity: 0},150); 
    }); 

Answer 1

只需將其重置爲任何最初的值，而在開始第一個動畫之前它已被隱藏。我把值("top", 50)的例子，但你可以在實際起始值填寫你想要的：

$(".box").css("opacity",0); 
$(".container").mouseover(function() { 
    $(".box").stop(true, true).css("top", 50).animate({top:99, opacity: 1},150); 
}); 
$(".container").mouseout(function() { 
    $(".box").stop(true, true).animate({top:59, opacity: 0},150); 
});