Position différente de fond chaque clic

Question

Im essayant de construire sorte de diapositive où lorsque cliquer sur le lien « .animate » va changer sa position (à chaque fois 100px plus)

Ce:

$(function(){ 
    $('#m-main').click(function(){ 
     $('slide').animate({top : "100px"}, {duration:500}) 
    }) 
}); 

ne fonctionnera que une fois que.

Comment puis-je faire fonctionner cela?

Un grand merci pour votre aide.

Answer 1

$(function() { 
    $('#m-main').click(function(){ 
     $(this).data($(this).data('pos') + 100); 
     $('slide').animate({top : $(this).data('pos') + 'px'}, {duration:500}) 
    }) 
}); 

Answer 2

Quand il exécute le rembourrage fixe haut en 100px, donc après la première fois qu'il est la mise pour la même valeur qu'il a déjà. Vous devez incrémenter la valeur à chaque fois.

$(function(){ 
    $('#m-main').click(function(){ 
    var current = $('slide').css('top'); 
    current = current + 100; 
    $('slide').animate({top : current+"px"}, {duration:500}) 
    }) 
}); 

Code ci-dessus non testé

Answer 3

Essayez d'utiliser un compteur au lieu de simplement top : "100px". Il ne fait que le faire une fois parce que votre réglage est de 100px, puis de nouveau 100px, ce qui le maintient juste là où il est. Vous voulez qu'il se déplacer à 200px puis à 300px, etc.

Essayez ceci:

var fromTop = 100;

$(function() { fromTop = fromTop + 100; $('#m-main').click(function() { $('slide').animate({top : '"' + fromTop + 'px"'}, {duration:500}) }) });

Answer 4

Il semble que vous avez une erreur dans la chaîne de requête dans le gestionnaire de clic. $('slide') va sélectionner tous les <slide> éléments, dont je suppose que vous n'en avez aucun, peut-être $('.slide') ou $('#slide') est ce que vous cherchez?

Si vous gardez simplement une référence de la position à laquelle vous souhaitez que l'élément se déplace et que vous l'augmentiez de 100 à chaque fois (voir la réponse du chaos), vous devriez avoir raison.

Answer 5

$(function(){ 
var pos=100; 
    $('#m-main').click(function(){ 
     $('slide').animate({top : pos+'px'}, {duration:500}); 
    pos=pos+100; 
    }); 

}); 

Answer 6

Essayez ceci:

$('#m-main').click(function(){ 
    var slide = $('.slide', this), 
     posY = parseInt(slide.css("background-position").split(" ")[1]); 
    slide.stop().animate({backgroundPosition: "0 "+(Math.ceil(posY/100)*100 + 100)+"px"}, {duration:500}); 
});