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

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>

感谢您的建议，Markus

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

 <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>

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

问题描述

2 个解决方案

解决方案1
0 已采纳 2016-08-25 22:28:42

解决方案2
0 2016-08-26 03:59:08

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

问题描述

2 个解决方案

解决方案1 0 已采纳 2016-08-25 22:28:42

解决方案2 0 2016-08-26 03:59:08

解决方案1
0 已采纳 2016-08-25 22:28:42

解决方案2
0 2016-08-26 03:59:08