CSS / jquery if() css-эффект

Question

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

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

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

Я хочу изменить margin-top на 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);
        }    
    });
});

Редактировать

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

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

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

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

Answer 2

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

Таким образом, вы должны проверить, есть ли

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

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

$('.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

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

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

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

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

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

Answer 5

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

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

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