CODEWITHSUNDEEP
jquerycssconditional-statementsstatements
user1361747
user1361747

Reputation: 31

Jquery conditional statements for css?

Conditional statements dont appear to be working for me. Im trying to a set of stacked images to change their zIndex based on the zIndex of the one being selected. So if i have a few buttons to call up a few images to the front:

(assume we started out on the first image by default and are selecting the 2nd image)

<script>
$(function() {
    var z = $("#image2").zIndex;  //also tried .css.zIndex;
    $("#button2").click(function() {
        if (z != 999 ) {
            $("#image1").animate({zIndex: 0}, 1, 'linear');
            $("#image2").animate({zIndex: 999}, 1, 'linear'); 
        } else {
        return false;
        };  
    });
});
</script>

The problem is that while it does work, it works regardless of whether the condition is true or not, so if i select the 2nd image then select it again it will run the script. Now before you start wondering why that matters, there's more going on than just that, which is causing visual errors to occur otherwise id just leave it at that, but this is the gist of it.

Upvotes: 0

Views: 2150

Answers (3)

Jay
Jay

Reputation: 1404

Check this out to see if this works for you? http://jsfiddle.net/atfZn/5/

Upvotes: 0

Evan Davis
Evan Davis

Reputation: 36592

You can do either:

$("#image2")[0].style.zIndex // document.getElementById(image2).style.zIndex

or

$("#image2").css('zIndex');

What you have here is a native JavaScript property getter/setter hanging off a jQuery collection, and that's simply not how that works.

Upvotes: 1

KBN
KBN

Reputation: 2974

if ( $("#image2").css("z-index") <= 999 ){
      $("#image1").animate({zIndex: 0}, 1, 'linear');
      $("#image2").animate({zIndex: 999}, 1, 'linear'); 
}

hope this works for you..

Upvotes: 0

Related Questions