JQuery - 要素を前後に一度にどのように回転させるのですか？

多分答えはかなりシンプルですが、私が見つけたすべての解決策には、無限回転、または1回の回転があります。私がしたいのは、要素を前方に回転させ、次に元の位置に戻し、ボタンを押すことによってトリガされます。JQuery - 要素を前後に一度にどのように回転させるのですか？

私が作っている小さなゲームの一部です。ここはJSFiddleです。それは上向きに回転させ、私はdiv要素が元の位置まで回転したいと思います：

$(function() { 
    $('#button').click(function() { 
     swingArm(); 
    }); 

}); 

function swingArm() { 
    $rollingPin = $('#rolling-pin'); 
    $({ deg: 0 }).animate({ deg: 50 }, { 
     duration: 400, 
     step: function (now) { 

      $rollingPin.css({ 
       transform: 'rotate(' + now + 'deg)' 
      }); 
     } 
    }); 
}

https://jsfiddle.net/cw4bj3tf/

私はこれを実現するにはどうすればよいですか？

出典

2017-02-02 f7n

このメソッドでは、単にCSS3アニメーションとjQueryのトグルクラスを使用してトリガーします。それはあなたがキーフレームを指定することを可能にするもっと簡単な方法です。私はそれをスイングのデフォルトに設定しましたが、簡単にピンを上げて、彼が動揺しているかのようにスイングさせることができます。お役に立てれば！

編集：スタイルを使用して削除するように変更しました。これは、各クリックイベントごとに毎回動作します。または関数で時間をミリ秒で指定するか、デフォルトで500msに設定します。楽しい！

編集：ちょうど楽しみのためにボタンを右クリックすると、私が参照していた揺れを見ることができます！

$('#button').click(function() { 
 
    swingArm(); 
 
}); 
 

 
$('#button').contextmenu(function() { 
 
    shakeArm(1000); 
 
}); 
 

 
function moveToby() { 
 
    setInterval(function() { 
 
    $(".toby").stop(true, true).animate({ 
 
     left: 450 
 
     }, 1000, 
 
     function() { 
 
     $(this).stop(true, true).animate({ 
 
      left: 0 
 
     }, 1000); 
 
     }); 
 
    }, 2000); 
 
} 
 

 
function swingArm(swingTime) { 
 
    if(!swingTime) swingTime = 500; 
 
    $("#rolling-pin").css('animation', swingTime+'ms swing-pin'); 
 
    setTimeout(function(){ 
 
    $("#rolling-pin").removeAttr('style'); 
 
    },swingTime+1); 
 
} 
 

 
function shakeArm(swingTime) { 
 
    if(!swingTime) swingTime = 500; 
 
    $("#rolling-pin").css('animation', swingTime+'ms shake-pin'); 
 
    setTimeout(function(){ 
 
    $("#rolling-pin").removeAttr('style'); 
 
    },swingTime+1); 
 
}

#game-container { 
 
    position: relative; 
 
    width: 700px; 
 
    height: 660px; 
 
    background-image: url('https://i.imgur.com/QxOVkCJ.jpg'); 
 
    background-size: cover; 
 
} 
 

 
#rolling-pin { 
 
    position: absolute; 
 
    top: 300px; 
 
    left: 480px; 
 
    width: 100px; 
 
    height: 75px; 
 
    background-image: url('https://i.imgur.com/zcZTO3z.png'); 
 
    background-size: cover; 
 
} 
 

 
#button { 
 
    position: absolute; 
 
    background-image: url('https://i.imgur.com/v3sQNLD.png'); 
 
    background-size: cover; 
 
    height: 100px; 
 
    width: 100px; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    cursor: pointer; 
 
} 
 

 
#button:hover { 
 
    transform: scale(1.1); 
 
} 
 

 
.toby { 
 
    position: absolute; 
 
    height: 239px; 
 
    width: 80px; 
 
    bottom: 157px; 
 
    background-image: url('https://i.imgur.com/ym3YyVW.png'); 
 
    background-size: cover; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 
@keyframes swing-pin { 
 
\t 0% { 
 
\t \t transform: rotate(0deg); 
 
\t } 
 
\t 50% { 
 
\t \t transform: rotate(50deg); 
 
\t } 
 
\t 100%{ 
 
\t \t transform: rotate(0deg); 
 
\t } 
 
} 
 

 
@keyframes shake-pin { 
 
\t 0% { 
 
\t \t transform: rotate(0deg); 
 
\t } 
 
\t 30% { 
 
\t \t transform: rotate(50deg); 
 
\t } 
 
    40% { 
 
     transform: rotate(25deg); 
 
    } 
 
    50% { 
 
     transform: rotate(50deg); 
 
    } 
 
    60% { 
 
     transform: rotate(25deg); 
 
    } 
 
    70% { 
 
     transform: rotate(50deg); 
 
    } 
 
\t 100%{ 
 
\t \t transform: rotate(0deg); 
 
\t } 
 
}

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

 
<body> 
 
    <div id="game-container"> 
 
    <div id="rolling-pin"></div> 
 
    <div class="toby"></div> 
 
    <div class="toby hidden"></div> 
 
    <div id="button"></div> 
 
    <div id="youWin">Continue</div> 
 
    <div id="youLose">Continue</div> 
 
    </div> 
 
</body>

出典

2017-02-02 19:58:36

JQuery - 要素を前後に一度にどのように回転させるのですか？

答えて

関連する問題