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

            }

正如你所看到的那样，代码在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%;
   }

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