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.

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.

Answer 2

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"});
}

Answer 3

this is not specified

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

Answer 4

How about this ?

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

If it doesn't work, try putting an alert for the content of :

$('.rightColumnButton').css("height")

... and pasting the result here.

Answer 5

I think the problem is that the $('rightColumnButton').css... returns a collection of values, and your if is comaring that to 30.

Try something like this instead:

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