jQuery .animate問題

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不設置過渡動畫效果，不管我有多增加的持續時間。 你能看到我錯過的錯誤嗎？

編輯：這裏是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'); 
      });