要素をhoverイベントで$(".matrix").css("transform", "rotate(1000deg)");して角度を一瞬で変えたいです。
普通にやればhoverした瞬間rotate(1000deg)になります。
ただ、hoverイベントより前にsetIntervalで定期的に回転する処理をした状態でhoverイベントをすると、瞬間でなくアニメーションになります。
なぜかわかるかたいらっしゃいますでしょうか?
cssのhover擬似要素ではなく、JQueryで処理したいです。(ここから拡張する上でその必要があるため)
https://gyazo.com/2190a6117a3b876453a12474cc13f5a6
https://gyazo.com/dfee3c93b1c322d61415ff33e6b7eb64
html
1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <link rel="stylesheet" href="css/reset.css"> 6 <link rel="stylesheet" href="css/stylesheet.css"> 7 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> 8 <script src="main.js"></script> 9</head> 10<body> 11 <div class="matrix"></div> 12</body> 13</html>
css
1body{ 2 background-color: black; 3 overflow: hidden; 4 padding: 100px; 5} 6.matrix{ 7 background-color: red; 8 width: 100px; 9 height: 100px; 10 transform: rotate(0deg); 11}
js
1$(function () { 2 // transformはanimateが使えないので使えるように(ネットから引っ張ってきたものです) 3 $.fn.animate2 = function (properties, duration, ease) { 4 ease = ease || 'ease'; 5 var $this = this; 6 var cssOrig = { transition: $this.css('transition') }; 7 return $this.queue(next => { 8 properties['transition'] = 'all ' + duration + 'ms ' + ease; 9 $this.css(properties); 10 setTimeout(function () { 11 $this.css(cssOrig); 12 next(); 13 }, duration); 14 }); 15 }; 16 17 let deg = 0; 18 let rotationFunc = function() { 19 deg = deg + 45; 20 $(".matrix").stop().animate2({ transform: "rotate(" + deg + "deg)" }, 1000) 21 } 22 setInterval(rotationFunc, 1500); 23 $(".matrix").hover(function () { 24 $(".matrix").css("transform", "rotate(1000deg)"); 25 }) 26});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。