Question

Not sure why this isn’t working…

I have several DIVs with an class of .rightColumnButton. A few of them have a height of 30px:

.rightColumnButton{
height:30px;
width:206px;
margin-top:20px;
}

I want to change the margin-top to 10px if they have a height of 30px:

$(function(){

if($( '.rightColumnButton' ).css("height") == "30"){
    $(this).animate({marginTop: "10px"}, 500);


    }    
} );

Doesn’t work for me.

Answer 1

Using css('height') returns also the unit, which usually is ‘px’. So in this case, you’re comparing '30px' == '30'. Use the height() method which returns a numerical value and compare that to an integer.

Also, you are not specifying what object you want to animate, as the element doesn’t get ‘carried’ inside the if clause. Use the each() method on the element to create a closure:

$(function(){
    $('.rightColumnButton').each(function() {
        if($(this).height() == 30) {
            $(this).animate({marginTop: "10px"}, 500);
        }    
    });
});

EDIT

Instead of writing in the comments, I thought I’d clarify myself here. I assume your point is to animate all elements that have a height of 30px. In your original post, you had this:

if($( '.rightColumnButton' ).css("height") == "30"){

That does select all ‘.rightColumnButtons’ allright, but when you use the css("height") call, you are getting only the height of the first element. If your code had worked, it would have animated all of the divs only if the first div had had a height of 30px.

That is where the each() method comes in handy. It loops through every element in the selection and compares the heights independently of each other and animates if necessary.