jQuery .animate issue

Question

J'ai le code suivant.

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

      } 

Comme vous pouvez le voir le code est identique dans les deux côtés du si, mais s'il est vrai que le jquery n'anime pas la transition, peu importe à quel point j'augmenter la durée. L'un de vous peut-il voir une erreur ici?

EDIT: Voici le css aussi:

.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

Je vais deviner un peu, mais je suppose que des éléments avec la classe off ne sont pas visibles. Comme le changement de classe est exécuté immédiatement, vous n'avez pas le temps de voir l'animation.

Vous souhaitiez probablement que la classe soit modifiée à la fin de l'animation. Pour ce faire, passer un rappel à animate, elle sera appelée lorsque l'animation est terminée:

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