Jquery Sliding Div ne fonctionne qu'une fois

Question

J'écris du code qui fait glisser une div à gauche ou à droite de la page en fonction d'une pression sur une touche (flèches gauche ou droite). Voici mon script.

$(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); 
    } 
}); 

et voici un lien dans jsfiddle. http://jsfiddle.net/e32A3/

J'ai quelques questions à ce sujet que j'aimerais vraiment répondre parce que je ne semble pas comprendre cela correctement.

Pourquoi la fonction de glissière ne fonctionne-t-elle qu'une ou deux fois?

Pourquoi dois-je mettre

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

J'ai essayé

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

et il ne fonctionne pas

Aussi comment pourrais-je l'arrêter dans le centre? Je comprendre que je dois faire quelque chose le long des lignes de

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

mais encore une fois que je l'ai essayé et ça n'a pas fonctionné.

Answer 1

Essayez ceci:

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

Working Demo

Answer 2

Essayez ceci:

$(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); 
} 
}); 

Ajouté right-"auto" au lieu de offset().right, il n'y a rien que offset().right. Le décalage ne contient que les valeurs supérieure et gauche. Démo: http://jsfiddle.net/lotusgodkk/e32A3/2/

Answer 3

Pourquoi la fonction de glissière ne fonctionne-t-elle qu'une ou deux fois?

Parce que dans la deuxième manche, il a déjà la propriété « gauche: 100% »

Pourquoi dois-je mettre

Parce que le réglage « gauche » ou « droite » prendra effet que si position de l'élément défini sur fixe/absolu/relatif

Comment également l'arrêter dans le centre?

Pour définir dans le centre défini

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

Enfin, vous devez fonctionner avec l'un des attr « gauche » ou « droite » et définir la position de l'élément en 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; 
}