When using the css('height') method, it includes the unit 'px'. Therefore, you are essentially comparing '30px' == '30'. To avoid this, utilize the height() method which provides a numerical value for comparison.
Furthermore, ensure to specify the object you want to animate within the if clause. You can achieve this by incorporating the each() method on the element to establish a closure:
$(function(){
$('.rightColumnButton').each(function() {
if($(this).height() == 30) {
$(this).animate({marginTop: "10px"}, 500);
}
});
});
UPDATE
To clarify further regarding animating elements with a height of 30px, consider the following code improvements compared to your initial approach:
if($( '.rightColumnButton' ).css("height") == "30"){
While this does select all '.rightColumnButtons', it only retrieves the height of the first element. Essentially, your original code would only animate all divs if the first div had a height of 30px.
Implementing the each() method is beneficial in looping through each element individually, allowing independent comparison of heights and subsequent animation if required.