CODEWITHSUNDEEP
javascriptjquery
Dom
Dom

Reputation: 3126

Different background position every click

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.

Upvotes: 0

Views: 213

Answers (6)

Gumbo
Gumbo

Reputation: 655735

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

Upvotes: 0

halocursed
halocursed

Reputation: 2495

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

});

Upvotes: 0

nickf
nickf

Reputation: 546443

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.

Upvotes: 0

J.R. Garcia
J.R. Garcia

Reputation: 639

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

Upvotes: 0

acrosman
acrosman

Reputation: 12900

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

Upvotes: 0

chaos
chaos

Reputation: 124355

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

Upvotes: 1

Related Questions