CSS / JQuery If () CSS эффект

Question

Не уверен, почему это не работает ...

У меня есть несколько DIV с классом .rightColumnButton. Некоторые из них имеют высоту 30 пикселей:

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

Я хочу изменить маржу на 10px, если она имеет высоту 30px:

$(function(){

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


    }    
} );

У меня не работает.

Answer 1

Использование css('height') возвращает также единицу измерения, которая обычно равна «px». Так что в этом случае вы сравниваете '30px' == '30'. Используйте метод height(), который возвращает числовое значение, и сравните его с целым числом.

Кроме того, вы не указываете, какой объект вы хотите анимировать, так как элемент не переносится внутри предложения if. Используйте метод each() для элемента, чтобы создать замыкание:

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

EDIT

Вместо того, чтобы писать в комментариях, я подумал, что уясню себя здесь. Я предполагаю, что ваша цель состоит в том, чтобы анимировать все элементы, которые имеют высоту 30 пикселей. В исходном посте у вас было это:

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

Это правильно выбирает все '.rightColumnButtons', но когда вы используете вызов css("height"), вы получаете только высоту первого элемента. Если бы ваш код работал, он оживил бы все элементы div , только если бы первый элемент div имел высоту 30 пикселей.

Вот где метод each() пригодится. Он просматривает каждый элемент в выделении и сравнивает высоты независимо друг от друга и анимирует при необходимости.

Answer 2

метод css() вернет строку с единицами измерения, в вашем случае '30px';

Так что вы должны проверить на

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

или используйте функцию высоты ():

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

Вам также нужно определить this перед анимацией.

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

Answer 3

this не указано

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

Answer 4

Я думаю, проблема в том, что $ ('rightColumnButton'). Css ... возвращает коллекцию значений, а ваш if сравнивает это с 30.

Попробуйте что-то вроде этого:

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

Answer 5

Как насчет этого?

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

Если это не сработает, попробуйте добавить оповещение для содержания:

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

... и вставляем результат сюда.