jquery animate（）がプロトタイプで動作しない

プロトタイプを呼び出すと、このjquery行が機能しないのはなぜですか？ jquery animate（）がプロトタイプで動作しない

$("#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>

おかげで、マルクス

出典

2016-08-25 Markus

あなたの変数の宣言はVAR '、車の機能であり、そこのための機能の範囲でのみ利用可能ですポルシェ=新しい車（）、ランチャ=新しい車（）; ' –

あなたはこのような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>

出典

2016-08-25 22:28:42 Ehsan

まあ、ありがとう。このソリューションはうまくいきます。 "position：relative"を設定し、すべて正常に動作します。 "duration：2000"を設定する必要はありませんが、アニメーションはよりよく見えます。 :) – Markus

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

出典

2016-08-26 03:59:08

jquery animate（）がプロトタイプで動作しない

答えて

関連する問題