質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2005閲覧

velocity.jsでアニメーションをループさせたい

southern_flavor

総合スコア70

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/02/24 13:08

やりたいこと

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});

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

velocity.jsは、全く詳しくありませんが・・!

velocityで、divのborderの色を位置毎に変えることが出来るなら、もっと簡単にできるのでは?と思いましたが、ちょろっと試した限りでやり方が分からなかった・・!(中身の細かいところまでは確認してませんが^^;)

ので、
とりあえず、現状を活用して永久ループさせる方法を。


動作がバラバラになるのは、それぞれが孤立した処理になっているからかなと思います。
せっかくcompleteを使うなら、「次の動作」を指定して、自分でタイミング(delay)を指定しなくてすむようしてはどうでしょうか。

全部を書くと、こんな感じです。

//左を描く function left_draw(){ $(".left").velocity({ height: '100%' }, { duration:500, complete: top_draw });//次は上を描く } //上を描く function top_draw(){ $(".top").velocity({ width: '100%' }, { duration:500, complete: right_draw });//次は右を描く } //右を描く function right_draw(){ $(".right").velocity({ height: '100%' }, { duration:500, complete: bottom_draw });//次は下を描く } //下を描く function bottom_draw(){ $(".bottom").velocity({ width: '100%' }, { duration:500, complete: bottom_del });//次は下を消す } //下を消す function bottom_del(){ $(".bottom").velocity({ width: '0' }, { duration:500, complete: right_del });//次は右を消す } //右を消す function right_del(){ $('.right').velocity({ height: '0' }, { duration: 500, complete: top_del});//次は上を消す } //上を消す function top_del(){ $(".top").velocity({ width: '0' }, { duration:500, complete: left_del });//次は左を消す } //左を消す function left_del(){ $('.left').velocity({ height: '0' }, { duration: 500, complete: left_draw});//最初に戻って、左を描く } $(function () { //最初の1回は自分で呼び出します。 left_draw(); });

「描く」「消す」で処理していることはほぼ同じ内容なので、全部まとめちゃうこともできますね。

たとえばこんな感じ・・
(こういうまとめ方は、好みもあると思うので、あくまでご参考までに・・)

javascript

1var counter = 0;//処理のカウンター 2var targets = ['.left','.top','.right','.bottom'];//対象 3var opts = ['height','width','height','width']; 4function anime(){ 5 if(counter >= (targets.length*2)){ 6 counter = 0;//往復分処理したら、リセット 7 } 8 //描くか、消すか 9 let draw = counter < targets.length ? true:false; 10 //描くときは前から順、消す時は後ろから順に。 11 let idx = draw ? counter:(targets.length) - (counter - targets.length) - 1; 12 let option = {}; 13 option[opts[idx]] = draw ? '100%':'0'; 14 15 $(targets[idx]).velocity( option ,{ duration:500, complete: anime }); 16 counter++; 17} 18$(function () { 19 //最初の1回は自分で呼び出します。 20 anime(); 21});

これで、ずーっと、動いているはず。。。

※「描く」「消す」と表記していますが、実際は質問の提示コードと同じでspanの幅・高さを変えている処理です。

投稿2019/02/25 03:53

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

southern_flavor

2019/02/28 01:38

ご回答ありがとうございます。 タイマー処理は不要なんですね・・・。 letの中で条件式を入れる等、後者のソースコードのほうが洗練されていてとても参考になります。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問