动画后重置 [英] Resetting following an animation

问题描述

我已将以下动画配置为在鼠标悬停"上淡入并滑动块，使其进入视图，只是淡出并在"mouseout"上再次将其滑开.但是，如果我再次将鼠标移回容器DIV上方，则会继续执行相同的动画，但是将从错误的位置开始.如何使它重设回起始位置?如果可能的话，我希望避免添加其他动画以将其移回原始位置.

I have the following animation configured to fade and slide a block into view on "mouseover", only to fadeout and slide it away again on "mouseout". However, if I move the mouse back over the container DIV again the same animation proceeds but starting from the wrong position. How do I get it to reset back to the starting position? If possible, I'd like to avoid having to add another animation to move it back to the original position.

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

推荐答案

在开始第一个动画之前，只需将其重置为隐藏时其最初的最高值即可.我在示例中输入了值("top", 50)，但是您可以填写所需的实际起始值:

Just reset it to whatever the top value originally was while it's hidden before you start your first animation. I put the value ("top", 50) in the example, but you can fill in the actual starting value you want:

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

这篇关于动画后重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！