多个悬停实例jQuery

时间:2012-07-12 04:59:40

标签: javascript animation hover multiple-instances mouseenter

我有一个div从另一个div的顶部到底部动画。我正在播放带有mouseenter / leave和JS动画的w / easing,其原始状态为up / top。我想悬停/鼠标中心,让它向下移动并保持向下,如果我鼠标移动/悬停。当我再次悬停时,它将动画回到顶部/开始。

我最初使用了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;

3 个答案:

答案 0 :(得分: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"
        });   
    });
}

答案 1 :(得分:1)

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

对于第一个功能,触发向下动画,并在输入的项目中添加一个类。将课程称为“向下移动”或明显的东西。

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

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

答案 2 :(得分: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缓和?)