2015-07-22 4 views
0

У меня есть тележка, содержащая список элементов, которые я хочу оживить изменение цвета.Изменение цвета интерфейса jQuery не работает должным образом (приложение RoR)

Каждый элемент в списке имеет белый или серый фон в зависимости от того, находится ли он в нечетном/четном положении в корзине.

Когда я удаляю элемент в середине списка, он скользит вверх, и весь элемент меняет свои цвета соответственно, поскольку их положение изменилось.

Вот код:

count = 0; 
$(".cart_item").each(function(){ 
    if (count % 2 == 0) 
    { 
    $(this).delay(count * 1000).removeClass("background_gray",800); 
    } 
    else 
    { 
    $(this).delay(count * 1000).addClass("background_gray",800); 
    } 
    count += 1; 
}); 

Добавление класса background_gray работает правильно, но удалить его с анимацией не работает. Он удаляется, но в течение одного выстрела.

Я также попытался сделать следующее, но я получил тот же эффект!

$(this).delay(count * 1000).addClass("background_white",800).removeClass("background_gray"); 

jQuery-UI уже включен правильно.

Любые подсказки?

Спасибо!

ответ

2

Это не ответит на ваш прямой вопрос, но знаете ли вы, что вы можете создавать альтернативные строки только с помощью css, а не беспокоиться об использовании javascript?

попробовать это, вместо JavaScript

<style type="text/css"> 
    .cart_item:nth-child(even) {background: #ccc} 
    .cart_item:nth-child(odd) {background: #FFF} 
</style> 

http://www.w3.org/Style/Examples/007/evenodd.en.html

Очевидно, вам еще нужно JavaScript, чтобы удалить литиево или все, что вы делаете.

+0

Спасибо! +1 для подсказки (хотя я не могу использовать в этом конкретном случае, потому что я хочу анимировать элемент по элементу, а не в одно и то же время ...) –

+0

Вы хотите, чтобы вы анимировали меняющийся цвет фона, с помощью задержка между каждым изменением цвета? Это звучит немного странно. –

Смежные вопросы