回転機能が正常に動作しない毎回または一度だけ送信するとき

Question

毎回10度ずつ送信して右サイドまたは左サイドを送信したいが回転しない。そして私はそれを各ブラウザで回転させたいと思います。私は何が欠けていますか？

<script type="text/javascript" src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script> 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
<script> 
function rotate(deg){ 
     var degree = deg; 
     document.getElementById("image").rotate({ angle:0+degree,animateTo:+degree,easing: $.easing.easeInOutExpo }); 
} 
</script> 

<input type="submit" name="submit" id="submit" value="Rotate" onClick="rotate('10')"> 
<img src="https://www.google.com/images/srpr/logo3w.png" id="image"> 

Answer 1

使用$("#image")、あなたが使用しているスクリプトは、それをもとにしているので、あなたのコードにjQueryライブラリを含めることを忘れないでください。下のスニペットを参照してください。

また、毎回回転ボタンが機能するように、関数外で変数宣言を移動したので、関数が呼び出されるたびにリセットされませんでした。次に、関数が呼び出されるたびに値degを追加し、それに応じて角度を増やします。

var degree = 0; 
 
function rotate(deg){ 
 
     degree += deg; 
 
     $("#image").rotate({ angle:0+degree,animateTo:+degree,easing: $.easing.easeInOutExpo }); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> 
 
<script src="http://beneposto.pl/jqueryrotate/js/jQueryRotateCompressed.js"></script> 
 

 
<input type="submit" name="submit" id="submit" value="Rotate" onClick="rotate(10)"> 
 
<img src="https://www.google.com/images/srpr/logo3w.png" id="image">