やりたいこと
hoge要素内の外側に
ボーダーが時計回りで動く→終わったら、反時計回りにする
というものを無限ループさせたいです。
参考:
https://codepen.io/sarath-ar/pen/dMKxxM
こちらの真ん中にあるボタンの動きです。
現状
ボーダーの動きは一通り、追加できたのですが、1回しかループしない状態です。
setTimeoutの値を変えたりすると、動きがバラバラになってしまいます。
ですので、もし、もっと効率の良い書き方があればあわせて教えていただけると助かります。
バージョン
jQuery 2.2.4
velocity.js 2.0.5
ソースコード
html
1<div class="hoge"> 2 <span class="left"></span> 3 <span class="top"></span> 4 <span class="right"></span> 5 <span class="bottom"></span>hoge</div>
css
1body { 2 background: #333; 3} 4.hoge { 5 position: relative; 6 background: #000; 7 width: 100px; 8 height: 100px; 9} 10.hoge span { 11 position: absolute; 12 background: #fff; 13} 14 15.left { 16 bottom:0; 17 left:0; 18 width:2px; 19 height:0; 20} 21.top { 22 top:0; 23 left:0; 24 width:0; 25 height:2px; 26} 27 28.right { 29 top:0; 30 right:0; 31 width:2px; 32 height:0; 33} 34 35.bottom { 36 bottom:0; 37 right:0; 38 width:0; 39 height:2px; 40}
jQuery
1$(function () { 2 setTimeout(loop); 3 4function loop(){ 5 anime1(); 6 anime2(); 7 anime3(); 8 anime4(); 9} 10 11function anime1() { 12$(".left").velocity({ 13 height: '100%' 14 },{ 15 duration:500, 16 complete: function(){ 17 $('.left').velocity({ 18 height: '0' 19 },{ 20 duration: 500, 21 delay: 3000 22 }) 23 } 24}); 25} 26 27function anime2(){ 28$(".top").velocity({ 29 width: '100%' 30},{ 31 delay: 500, 32 duration: 500, 33 complete: function(){ 34 $('.top').velocity({ 35 width: '0' 36 },{ 37 duration:500, 38 delay: 2000 39 }) 40 } 41}); 42} 43 44function anime3(){ 45$(".right").velocity({ 46 height: '100%' 47},{ 48 delay: 1000, 49 duration: 500, 50 complete: function(){ 51 $('.right').velocity({ 52 height: '0' 53 },{ 54 duration:500, 55 delay: 1000 56 }) 57 } 58}); 59} 60 61function anime4(){ 62$(".bottom").velocity({ 63 width: '100%' 64},{ 65 delay: 1500, 66 duration: 500, 67 complete: function(){ 68 $('.bottom').velocity({ 69 width: '0' 70 },{ 71 duration:500 72 }) 73 } 74}); 75} 76});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/28 01:38