jquery - 跟随动画重置

Question

我将以下动画配置为在“鼠标悬停”上淡入淡出并将块滑入视图，仅在“mouseout”上淡出并再次将其滑开。但是，如果我再次将鼠标移回容器 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);
});