Question

我有以下代码：

var isOn = false;

$('.switch').on("click",function(){

  if (isOn){


    $('.toggle').animate({
      left:"18px"
    },10,"linear",

     {
      complete: function(){
        $('#label').text("ON");
      }
    });
    isOn = false;



  } else {
    $('.toggle').animate({
      left:"4px"
    }, 10,"linear",
                         {
      complete: function(){
        $('#label').text("OFF");
      }
    });
    isOn = true;
  }

});

http://codepen.io/pietrofxq/pen/LpzDE?editors=001

这是用jquery打开/关闭的开关。它没有使用animate()方法我正在用css做动画，但它在Internet Explorer中出现了问题以下是原始效果：http://codepen.io/anon/pen/iwatp

为什么第一个链接中的完整功能不起作用？

编辑：此代码正常运行，但仍然无法在IE上正常工作

Answer 1

您似乎混合了.animate函数的the two different signatures。如果将持续时间和缓动直接作为参数传递，则必须对回调函数执行相同的操作：

$('.toggle').animate({left: "18px"}, 10, "linear", function(){
  $('#label').text("ON");
});

或者你必须传递两个对象：

$('.toggle').animate(
  {
     left:"18px"
  },
  {
    duration: 10,
    easing: "linear",
    complete: function(){
      $('#label').text("ON");
    }
  }
);

Answer 2

现在它会起作用。请检查jsfiddle链接 http://jsfiddle.net/banded_krait/da2kE/

我从您的代码中删除了一些括号和complete:数组键，希望这对您有用。

Jquery animate（）不起作用

2 个答案: