0

我有一个 div 从另一个 div 的顶部到底部设置动画。我目前正在播放带有 mouseenter/leave 和带有缓动的 JS 动画，其原始状态是向上/顶部。如果我鼠标离开/悬停，我想悬停/鼠标进入并让它向下移动并保持向下。当我再次悬停时，它将动画回到顶部/开始。

我最初使用 mouseenter/leave 这显然不能满足我的需要，因为我希望状态在 mouseleave 时保持不变。那么什么功能最适合这种需求呢？我仍在学习术语，并且在如何更好地表达问题时磕磕绊绊。

代码：

    function init() { 
        mouseenter: function(){
            $(".ltrP").stop(true, true).animate({
                marginTop:"170px"
            }, 
            {
                duration: 1000,
                easing: "easeOutBounce"
            });
        },
        mouseleave: function(){
            $(".ltrP").stop(true, true).animate({
                marginTop: "0px"
            },
            {
                duration: 1000,
                easing: "easeInBounce"
            });   
        }
    });
}
window.onload = init;
4

3 回答 3

1

你可以这样重写你的代码：

$(document).ready(function(){
    init();
});
function init() {
    $.hover(function(){
        $(".ltrP").stop(true, true).animate({
            marginTop:"170px"
        }, 
        {
            duration: 1000,
            easing: "easeOutBounce"
        });
    },
    function(){
        $(".ltrP").stop(true, true).animate({
            marginTop: "0px"
        },
        {
            duration: 1000,
            easing: "easeInBounce"
        });   
    });
}
于 2012-07-12T05:09:37.527 回答
1

有很多方法可以做到这一点。也许最容易概念化的方法是向动画项目添加一个类。您想编写两个单独的 mouseenter 函数。

对于第一个函数，触发您的向下动画，并为输入的项目添加一个类。将课程称为“movedown”或其他明显的东西。

然后，编写第二个 mouseenter 函数。当具有该类的项目被鼠标插入时，将其设置为动画，然后删除该类。

忘记 jQuery 吧hover。它只是 mouseenter/mouseleave 的包装器。它可能会导致问题。jQuery 文档对此提出警告。通常最好分别编写 mouseenter 和 mouseleave 函数，特别是当你尝试做一些棘手的事情时，比如这样。

于 2012-07-12T05:18:49.453 回答
1

我已经编辑了您的代码，请参阅注释以获取解释：

$(document).ready(function(){ // Runs when document is loaded

    $(".ltrP").mouseenter(function(){ // Mouseenter event on the given object (.ltrP)
        var goTo = $(this).css("marginTop") == '0px' ? 170 : 0; // When the current margin-top is 0px animate to 170px, otherwise animate it back to 0px
        $(this).stop(true,false).animate({ // Changed the stop(true, true) to stop(true, false), looks nicer in my opinion
            marginTop: goTo // Animate to the just set variable
        }, 1000);
    });

});

并在这里看到一个演示：http: //jsfiddle.net/hnDmt/

（而且缓动“easeInBounce”对我不起作用，所以我删除了它。（也许是一个 jQuery UI 缓动？））

于 2012-07-12T05:30:29.800 回答