jquery - 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 两边的代码是相同的，但如果它是 true，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');
            });