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

Answer 2

试试这个：

$(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%',
        right: 'auto'
    }, 1000);
}
if (e.keyCode == 37) {
    $inner.css({
        position: 'fixed',
        top: $inner.offset().top,
    }).animate({
        right: '100%',
        left: 'auto'
    }, 1000);
}
});

将right添加到"auto"而不是offset().right，没有offset().right。偏移仅包含顶部和左侧值。演示：http://jsfiddle.net/lotusgodkk/e32A3/2/

Answer 3

为什么滑动功能只能工作一到两次？

因为在第二次运行中它已经是属性＆＃34;左：100％＆＃34;

为什么我需要放

因为设置＆＃34;左＆＃34;或＆＃34;对＆＃34;仅当元素的位置设置为固定/绝对/相对

时才会生效

我怎么能在中心停止它？

设置中心设置

$inner.animate({left:window.(innerWidth-$inner.width)/2+"px"})

最后你需要使用attr＆＃34; left＆＃34;或＆＃34;对＆＃34;并在CSS中设置元素的位置

JS：

$(document).keydown(function(e){
var $inner = $('.inner-cover');
if (e.keyCode == 39) {
    $inner.animate({left:($(window).width() - $inner.width())+"px"}, 1000);
    //this to set on middle//$inner.animate({left:($(window).width() - $inner.width())/2+"px"}, 1000);
}
if (e.keyCode == 37){ 
 $inner.animate({left:0}, 1000);
}
});

CSS：

.inner-cover {
position:fixed;
width:200px;
left:50%;
top:50%;
background-color:green;
}

Jquery Sliding Div只工作一次

3 个答案: