Different background position every click

Question

Hi,

Im trying to build sort of slide where when click on link ".animate" will change it position ( every time 100px more)

This:

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

will work only once.

How can I make this working?

Many thanks for your help.

Answer 1

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

Answer 2

When it runs it sets the top padding to 100px, so after the first time it's just setting it to the same value it already has. You need to increment the value each time.

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

code above untested

Answer 3

Try using a counter instead of just top : "100px". It is just doing it once because essentially your setting top to 100px and then setting top to 100px again which is just keeping it where it is. You want it to move to 200px and then to 300px, etc.

Try this:

var fromTop = 100;

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

Answer 4

It looks like you've got some error in the query string in the click handler. $('slide') will select all <slide> elements, which I assume you have none, perhaps $('.slide') or $('#slide') is what you're after?

If you just keep a reference of the position you'd like the element to move to and increase that by 100 each time (see chaos's answer) then you should be right.

Answer 5

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

});

Answer 6

Try this:

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