Question

所以，这个小提琴：http://jsfiddle.net/aXsWz/31/实际上是我希望事情发挥作用的方式。然而，这不是我的实际代码所发生的事情（不能让Fiddle复制该问题）。但是，希望我能彻底解释它以获得帮助。它适用于Firefox和IE，但不适用于Chrome。

   $(document).ready(function() {

$('div#navNavigate').click(function(){
        $('div#navNavigateHide').show()
        $('div#navNavigate').hide()
        $('div#sideNav').show()
        $('div#container').animate({'left':'+=120'});
    });  

$('div#navNavigateHide').click(function(){
        $('div#navNavigate').show()
        $('div#navNavigateHide').hide()
        $('div#container').animate({'left':'-=120'});
    });
});

而不是“容器”div只是向上移动，它首先向左跳转到一个新的起始位置然后按照指定的距离动画。另外，我想要注意的是，跳跃距离比指定的动画距离更大（即我的容器几乎跳出屏幕，然后动画回到局部视图。如果它跳过相等的距离，它会动画回到它的原始位置）。

当我可以复制它时，我会发布更多代码/更新的小提琴，但是如果有人可以提供帮助，那么我将非常感激。谢谢！

编辑* 因此，当放入常规文件并在Chrome中查看时，小提琴不起作用。不幸的是，没有办法用jsfiddle复制它。但是，任何愿意帮助并希望看到问题的人，只需将小提琴复制粘贴到三个文件中并打开html即可。你会看到问题在于行动。

编辑* 我只是在想...如果它刚刚在我的电脑上发生，那么也许这是我的jQuery？我目前已经下载了1.7.1。所以也许我会抓住最新版本。可能会工作......

编辑* 已修复！这是jQuery版本。现在好了。

Answer 1

我修好了！好吧，我下载了最新版本的jQuery，现在它可以工作了。简单的修复。终于来了！

Answer 2

尝试替换

  $('div#container').animate({'left':'+=120'});

和

   $('div#container').animate({'left':'-=120'});

带

  $('div#container').stop().animate({'left':'+=120'});

和

  $('div#container').stop().animate({'left':'-=120'});

Answer 3

看起来您可以将您的功能合并为一个。有时这可以帮助解决时间/排序问题。

试试这个：

var hidden = true;
$('div#navNavigate').click(function(){
if (hidden) {    
    $('div#container').animate({'left':'+=120'});
} else {
    $('div#container').animate({'left':'-=120'});
}
    hidden = !hidden;
});

Fiddle

jQuery .animate（）无法在Chrome中运行（跳转到新的起始位置）

3 个答案: