"If statement" not working
Hi,
I'm trying to make a very simple image slider. For this I'm using a div which contains all the images next to each other, which is wrapped into a container div with an overflow:hidden. With a "previous" and "next" button I want to animate the margin-left property of the div which contains the images.
This is all working ok, but I want the div to reset back to it's original position when the last image has been reached and the user clicks on "next" again.
The width of one image is 500px, therefor I'm changing the margin-left with 500px each time. This is the code I'm using for that:
$(".gallery .next").click(function(){
$(".gallery-slides").animate({marginLeft: "-=500px"},{ duration:400, easing:"easeOutQuart"});
});
Again, this is working fine. But when I wrap an if statement around the function, I cannot seem to get it to work the way I want:
if($(".gallery-slides").css("marginLeft") == "0px"){
$(".gallery .next").click(function(){
$(".gallery-slides").animate({marginLeft: "-=500px"},{ duration:400, easing:"easeOutQuart"});
});
}
This should only allow the button to work once, when the div is at it's starting position. But instead it just keeps on going. Also when the end position of the div has been reached, I want it to reset to 0.
if($(".gallery-slides").css("marginLeft") == "-1500px"){
$(".gallery .next").click(function(){
$(".gallery-slides").animate({marginLeft: "0px"},{ duration:400, easing:"easeOutQuart"});
});
}
But this also doesn't work. I feel like I'm doing something terribly wrong (which wouldn't surprise me since I'm quite a jQuery newbie). Can anyone help me with this? Thanks in advance!
- Leon