faire glisser une image vers la gauche ou la droite

Question

Comment faire glisser une image vers la gauche/droite en utilisant javascript? Je veux qu'une image glisse lentement vers la droite. Utilisez-vous la fonction setTimeout de javascript pour modifier progressivement la valeur "left" du style d'élément? Peut-être que jQuery a une fonction pour ça?

Answer 1

jQuery ne vous :)

Il y a une fonction intégrée .animate():

Exemple de code (légèrement modifié de la jQuery) est ci-dessous et j'ai fait un travail jsFiddle: http://jsfiddle.net/Damien_at_SF/HRBkN/

CSS:

img.block { 
    position:absolute; 
    left:50px; 
    top:50px; 
    margin:5px; 
} 

HTML:

<button id="left">left</button> <button id="right">right</button> 
<img src="http://jsfiddle.net/img/logo.png" class="block" /> 

JS pour img positionné absolu:

$("#right").click(function(){ 
    $(".block").animate({"left": "+=50px"}, "slow"); 
}); 

$("#left").click(function(){ 
    $(".block").animate({"left": "-=50px"}, "slow"); 
}); 

JS pour img positionné par rapport/statique:

$("#right").click(function(){ 
    $(".block").animate({"margin-left": "+=50px"}, "slow"); 
}); 

$("#left").click(function(){ 
    $(".block").animate({"margin-left": "-=50px"}, "slow"); 
}); 

Espérons que cela aide :)

Answer 2

jQuery possède une méthode intégrée appelée animate.

Un exemple d'utilisation:

$('#id').animate({ 
    left: 200 
}); 

Plus:

Answer 3

Pour ce que sa valeur, j'ai ce fiddle qui le fait sans .animate(). Je n'ai pas utilisé .animate() mais je vais vérifier après avoir lu ce post.

Answer 4

je peux glisser l'image à gauche et à droite ce qui suit:..

function showDivs(n) { 
    var i; 
    var x = document.getElementsByClassName("mySlides"); 

    if (n > x.length) 
    { 
     slideIndex = 1 
    } 

    if (n < 1) 
    { 
     slideIndex = x.length 
    } 

    for (i = 0; i < x.length; i++) 
    { 
     x[i].style.display = "none"; 
    } 

    x[slideIndex-1].style.display = "block"; 
}