jQuery // why is this if-statement incorrect?

Question

In my html I have a div with 7 images listed but in the div "fit" only 5, so I created 2 buttons (bt1 and bt2) to "scroll horizontally" through these images.

What I want is when I click on bt2 AND the first image is on the first position (in this case when left is 0px), the images shouldn't be able to scroll further, else they just scroll normally.

Code snippet

$("#bt2").click(function()
 {
    if (($("#symbole").find("img").first().css({"left:0px"}))==true)
          {         
          }
    else{
          $("img").animate({
          "left":"+=100px"
          },
        420);
    }
 });

Answer 1

The css method does not return boolean true / false so that you can compare it with true as you did. You need to get css value for left but you are setting it

if (($("#symbole").find("img").first().css("left") === "0px")

OR

if($("#symbole img:eq(0)").css("left") === "0px") 

Answer 2

or use parseInt in order to get the value without px

if (parseInt($("#symbole").find("img").first().css("left"), 10) === 0)

Updated with suggestions.

Answer 3

Currently you are setting the css. You need to get the css attribute left and then compare it.

 if ($("#symbole").find("img").first().css("left") == "0px")

Answer 4

Css does not return true/false.you need to compare it with value like:

if (($("#symbole").find("img").first().css("left") === "0px")

Try using this instead of your if.