Question

如果我调用原型，为什么这个jquery行不起作用？

$("#demo").animate({left: '250px'});

参见下文：

这一行：

$("#demo").css("background-color","red");

按照我的预期工作。

完整代码：

<body>
  <style>
    #demo{width: 400px;}
    button {padding: 10px; background-color: #3f8aca; color: #fff; 
        border-radius: 3px; margin:100px 0 0 100px; border: none;}
  </style>
  <div id="demo"></div>
  <button onclick="porsche.drive();">My Porsche drives.</button>

  <script>
    function Car(){}

    var porsche = new Car(), 
        lancia = new Car();

    Car.fn = Car.prototype;

    Car.fn.drive = function drive(){
      console.log("Yeahh, I´m driving there!");
      document
        .getElementById("demo")
        .innerHTML = "Yeahh, I´m driving there!";
      $("#demo").css("background-color","red");

      // The line below does not work.
      $("#demo").animate({left: '250px'});
    }

    Car.fn.stops = function stops(){
      console.log("Oh, I´ve to stop here!");
    }

    lancia.stops();
  </script>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

</body>

感谢您的建议，马库斯

Answer 1

您必须像这样添加position: relative;：

#demo {
    width: 400px;
    position: relative;
  }

并添加duration选项：

$("#demo").animate({left: '250px'},{duration:2000});

最终代码：

<body>
  <style>
    #demo{
        width: 400px;
        position: relative;
      }
    button {padding: 10px; background-color: #3f8aca; color: #fff; border-radius: 3px; margin:100px 0 0 100px; border: none;}
  </style>
  <div id="demo"></div>
  <button onclick="porsche.drive();">My Porsche drives.</button>

<script>
  function Car(){}
    var porsche = new Car(), lancia = new Car();
    Car.fn = Car.prototype;

    Car.fn.drive = function drive(){
    console.log("Yeahh, I´m driving there!");
    document.getElementById("demo").innerHTML = "Yeahh, I´m driving there!";
    $("#demo").css("background-color","red");
    /* the function below dont works */
    $("#demo").animate({left: '250px'},{duration:2000});

  }
  Car.fn.stops = function stops(){
    console.log("Oh, I´ve to stop here!");
  }
lancia.stops();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    
    </script>
</body>

Answer 2

＆＃13;

<body>
  <style>
    #demo{
        width: 400px;
        position: relative;
      }
    button {padding: 10px; background-color: #3f8aca; color: #fff; border-radius: 3px; margin:100px 0 0 100px; border: none;}
  </style>
  <div id="demo"></div>
  <button onclick="porsche.drive();">My Porsche drives.</button>

<script>
  function Car(){}
    var porsche = new Car(), lancia = new Car();
    Car.fn = Car.prototype;

    Car.fn.drive = function drive(){
    console.log("Yeahh, I´m driving there!");
    document.getElementById("demo").innerHTML = "Yeahh, I´m driving there!";
    $("#demo").css("background-color","red");
    /* the function below dont works */
    $("#demo").animate({left: '250px'},{duration:2000});

  }
  Car.fn.stops = function stops(){
    console.log("Oh, I´ve to stop here!");
  }
lancia.stops();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
    
    </script>
</body>

＆＃13;

jquery animate（）在原型中不起作用

2 个答案: