CSS / jquery if() css effect

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.

Solution 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.

Solution 2

this is not specified

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

Solution 3

the css() method will return a string with units, in your case '30px';

So you have to check for

$('.rightColumnButton').css("height") == "30px" 

or use the height() function:

$('.rightColumnButton').height() == 30

You also need to define this before animating.

var col = $('.rightColumnButton');
if (col.height() == 30) {
    col.animate({marginTop: "10px"});
}