Question

我有一个包含主要内容的div容器的网页，里面有一个div，当我将鼠标放入容器时应该出现。这是我试过的代码：

var running=0;
                var running2=0;
                $('div.container').mouseenter(function() 
                {
                    if (running==0) 
                    {
                        running=1;
                        $('div.rightcontainer').css("margin-right",-350)
                        .animate({marginRight:0}, 750, function(){running=0;});
                    }
                }
                );



                $('div.container').mouseleave(function() {
                    if (running2==0) {
                    running2=1;
                    $('div.rightcontainer').css("margin-right",0)
                    .animate({marginRight:-350}, 750, function(){running2=0;});
                    }
                });

此代码有效：

$('div.container').mouseenter(function() {
                    console.log('trigger');
                    $("div.rightcontainer")
                    .css("visibility","visible")
                    .css("margin-right",-$("div.rightcontainer").width())
                    .animate({
                        marginRight:0
                    }, 1200); 
                });

                $('div.container').mouseleave(function() {
                    console.log('leave');
                    $("div.rightcontainer")
                    .css("visibility","visible")
                    .css("margin-right", "320") 
                    .animate({
                        marginRight:-350
                    }, 1200);
                });

然而，问题是如果鼠标多次进入，则对象会一直进入和退出。

编辑：

.one（）只执行一次，我的意思是它堆叠所有进入和退出并多次执行动画。

.stop（）解决方案更好，但动画会从任何地方跳到最后。如果有一种方法，如果鼠标在动画中间离开容器，动画停止它的位置并以另一种方式动画回来？

这是一个带有网站简化版的JSFiddle。容器是导航栏下面的任何东西。 http://jsfiddle.net/yEzXp/

Answer 1

使用.stop（）

$('div.container').mouseenter(function() {
    $("div.rightcontainer")
    .stop(true, true)
    .css("visibility","visible")
    .css("margin-right",-$("div.rightcontainer").width())
    .animate({
        marginRight:0
    }, 1200); 
});

$('div.container').mouseleave(function() {
    $("div.rightcontainer")
    .stop(true, true)
    .css("visibility","visible")
    .css("margin-right", "320") 
    .animate({
        marginRight:-350
    }, 1200);
});

JQuery动画div条目

1 个答案: