проблема jQuery .animate

У меня есть следующий фрагмент кода.

           if ($(checkboxID)[0].checked == false) {
                $(this).animate({
                    'background-position-x': '0%',
                    'background-position-y': '0%'
                }, 200, 'linear');

                $(checkboxID)[0].checked = true;
                $(this).removeClass('off').addClass('on');

            } else {
                $(this).animate({
                    'background-position-x': '100%',
                    'background-position-y': '0%'
                }, 200, 'linear');

                $(checkboxID)[0].checked = false;
                $(this).removeClass('on').addClass('off');

            }

Как вы можете видеть, код идентичен с обеих сторон if, но если это правда, jquery не анимирует переход, независимо от того, насколько я увеличиваю продолжительность. Может ли кто-нибудь из вас увидеть здесь ошибку, которую я пропустил?

РЕДАКТИРОВАТЬ: Вот и css:

    .checkbox-style  {
    display: block;
    width: 87px;
    height: 28px;
    background: url('images/check-square.png') no-repeat;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer;
   }
   .on {
    background-position: 0% 0%;
   }
   .off {
    background-position: 100% 0%;
   }

jquery jquery-animate background-position
person user2227904    schedule 30.03.2013    source источник
comment
Может быть предоставлен JSFiddle.   -  person Joe Slater    schedule 31.03.2013
comment
Вам нужно использовать backgroundPositionX... но он работает только в Chrome, вот кросс-браузерное решение: stackoverflow.com/questions/13442897/   -  person pathfinder    schedule 01.04.2013

Ответы (1)


arrow_upward
0
arrow_downward

Я собираюсь немного предположить, но я полагаю, что элементы с классом off не видны. Поскольку смена класса выполняется немедленно, у вас нет времени на просмотр анимации.

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

           $(this).animate({
                'background-position-x': '100%',
                'background-position-y': '0%'
            }, 200, 'linear', function(){
               $(checkboxID)[0].checked = false;
               $(this).removeClass('on').addClass('off');
            });
person Denys Séguret    schedule 30.03.2013
comment
Это div замена флажка. вот css для тех .checkbox-style { display: block; ширина: 87 пикселей; высота: 28 пикселей; фон: url('images/check-square.png') без повторов; -webkit-border-radius: 5px; -moz-border-radius: 5px; радиус границы: 5px; переполнение: скрыто; курсор: указатель; } .on { фоновая позиция: 0% 0%; } .off { фоновая позиция: 100% 0%; } - person user2227904; 31.03.2013