How does one make a jquery conditional with two events?

Question

I've never written an if statement before.

I want the two slideframe divs to move when I click but only if the variable navi is not equal to zero, and then to set navi to 1 after the divs have moved:

$(document).ready(function(){   
    $("#one").click(function(){
        if (navi !=0) {
           $(".slideframe").animate({opacity: "0.1", left: "-=960"}, 1200)
           $(".slideframe1").animate({ left: "-=960"}, 1200)
           navi = 1 
        }
    }); 
});

This just breaks the working jquery, but the best result I have got is for one div to slide but never two.

What am I doing wrong?

So thanks to Patrik this makes one of the divs move but not the first one! (i.e not .slideframe) .. but they both move if i dont put the if statement in...

<script>
var navi = "0";
</script>


<script>
$(document).ready(function(){   
    $("#one").click(function(){
        if (navi !=0)
    $(".slideframe").animate({opacity: "0.1", left: "-=960"}, 1200);
    $(".slideframe1").animate({ left: "-=960"}, 1200);
    navi = 1; 
    }); 
});
</script>

Answer 1

You are missing semicolons at the end of your statements.

This should do:

$(".slideframe").animate({opacity: "0.1", left: "-=960"}, 1200);
$(".slideframe1").animate({ left: "-=960"}, 1200);
navi = 1;

Answer 2

If I understand you correctly, you should set navi to 1 in a callback:

if (navi !=0) {
  $(".slideframe").animate({opacity: "0.1", left: "-=960"}, 1200)
  $(".slideframe1").animate({ left: "-=960"}, 1200, function() {
    navi = 1;
  });
}

This way navi will be '1' when the animation is complete.

The reason why your code breaks is likely a racing condition. If you want your elements to move only once when the user clicks, use the .one function in jQuery instead.

Answer 3

You are missing a few semicolons after your statements but as long as they are on different lines, Javascript shouldn't care. What might be going on is your .slideframes are statically positioned (that's the default value) and left has no effect on statically positioned elements. Try changing it to marginLeft or some other attribute that will certainly have an effect so you can isolate whether it's a CSS problem or a Javascript one.

Also just putting navi = 1 after your animate statements will cause it to be changed right after the animates are called. If you want navi changed after they are done animating, you need to use the callback that David posted.

Answer 4

How and where is navi defined? Did you write var navi = 1; somewhere? Make sure you did.

Try to put opacity and left in strings:

$(document).ready(function(){   
    $("#one").click(function(){
        if (navi != 0) {
           $(".slideframe").animate({"opacity": "0.1", "left": "-=960"}, 1200);
           $(".slideframe1").animate({ "left": "-=960"}, 1200);
           navi = 1; 
        }
    }); 
});

Also, your divs must have position: absolute set so they move when you change left...

EDIT: navi must be 1 for if to execute.

Answer 5

Yes it was this:

var navi = 0;

not

var navi = "0";

THANK YOU!

var navi = 0; $(document).ready(function(){ $("#one").click(function(){ if (navi !=1){ $(".slideframe").animate({opacity: "0.1", left: "-=960"}, 1200); $(".slideframe1").animate({ left: "-=960"}, 1200,function() { navi = 1; }); } }); });