javascript - Jquery Sliding Div 只工作一次

Question

我正在编写一些代码，使 div 根据某些按键(向左或向右箭头)滑动到页面的左侧或右侧。这是我的脚本。

$(document).keydown(function(e){
    var $inner = $('.inner-cover');
    if (e.keyCode == 39) {
     $inner.css({
       position: 'fixed',
       top: $inner.offset().top,
       left: $inner.offset().left
     }).animate({left:'100%'}, 1000);
   }
   if (e.keyCode == 37){ 
     $inner.css({
       position: 'fixed',
       top: $inner.offset().top,
       right: $inner.offset().right
     }).animate({right:'100%'}, 1000);
   }
});

这是 jsfiddle 中的链接。 http://jsfiddle.net/e32A3/

我有几个关于它的问题，我真的很想回答，因为我似乎没有正确理解它。

为什么滑动功能只能用一两次？

为什么要放

$inner.css({}).animate({left:'100%'},1000);

我试过了

$inner.animate({left:100%},1000); 

没用

另外，我如何将它停在中心？我想我必须按照

animate({left:($(window).width()-$inner.width())/2)},1000);

但我又试过了，但没有用。

Answer 1

试试这个:

 if (e.keyCode == 37){ 
 $inner.css({
   position: 'fixed',
   top: $inner.offset().top
 }).animate({left:'-100%'}, 1000);}

Working Demo