jQuery .animate issue

Question

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

  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'); 

      } 

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

EDIT: Вот 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%; 
    } 

Answer 1

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

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

  $(this).animate({ 
       'background-position-x': '100%', 
       'background-position-y': '0%' 
      }, 200, 'linear', function(){ 
       $(checkboxID)[0].checked = false; 
       $(this).removeClass('on').addClass('off'); 
      });