
iOSでSWFが動かないことから、JavaScript で簡単なアニメを作ろうと思っています。
初めてなので、アニメのループ動作に詳しい方教えてください。
(jQueryと合わせて、動作させます)
2個の動作を定義しています。
《動作A》
$(function(){
setTimeout(function(){
$('#photo').animate({
width: "776px",
opacity: 1,
}, 1500 ); },500);
//500遅らせる指示
});
《動作B》
$(function(){
setTimeout(function(){
$('#word').animate({
width: "398px",
opacity: 1,
}, 3000 );
},700);
//700遅らせる指示
});
このうち、動作Bのみを
動作完了 → 1000msec 表示キープ → 3000msec の逆動作で消える → 1000msec 表示無し
これを一連の動作として、ループさせたいのです。
interval 関連のコマンドの説明を見ましたが、自分にはわかりませんでした。
《動作B》に書き足して、ループできるなら、具体的記述で教えてください。
以上、よろしくお願いします。
No.2ベストアンサー
- 回答日時:
ANo1です。
繰返しの1回分を、setTimeoutなどを利用して書いてしまうとややこしくなります。(出来ないことはないですが…)
普通にanimate関数とそのcallbackを利用して1回分を記述しておいて、それをsetTimeoutやsetIntervalなどで繰り返すのがわかりやすいかと思います。
ANo1もそのようなつもりで、回答いたしました。
(もちろん、方法は他にもいろいろあると思います)
待つ時間や動きの内容がご質問文と補足で違うので、どれが本当なのか不明ですが、とりあえず単純化したサンプルを以下に。
(全角空白は半角に)
$(function(){
//初期設定
var target = $("#light").css({width:0, opacity:0});
//繰り返しの1回分を定義
var repeat = function(){
target.delay(1000).animate({ width: 398, opacity:1 }, 3000, function(){
target.delay(1000).animate({ width:0, opacity:0 }, 3000);
});
}
//repeatを繰り返す
repeat(); //最初はすぐに実行
var intervaId = setInterval(repeat, 8000); //8秒後から繰返し
});
※時間やタイミング、アニメーションの内容などは適宜調整してください。
書き方が、判りにくく済みません。
delayとjQueryのバージョンに問題あるらしく、
教えていただいた状態では動きませんでした。
//繰り返しの1回分を定義 の内部は、前の自前の
無駄の多い書き方を入れたら動作しました。
ちょっと不細工ですが、とりあえず動いているので。
ありがとうございました。
お礼を申しあげます。
No.1
- 回答日時:
考え方のみですが…
>動作完了 → 1000msec 表示キープ → 3000msec の逆動作で消える → 1000msec
>表示無し これを一連の動作として、ループさせたいのです。
1)まず、『動作→表示キープ→逆動作』を行う関数を作成します。
2)これを、setIntervalで8000msec間隔で繰り返します。
これで、ほぼご質問のようになると思います。
1)の関数作成の際にアニメーションを順序を保って実行するには、jQueryを用いているようですので、callback関数を利用することで比較的簡単に実現できると思います。
この回答への補足
fujillin 様
自分なりに考えてみました。
>1)まず、『動作→表示キープ→逆動作』を行う関数を作成します。
これを以下のように書きました。
無駄が多いと思いますが、一応動作しています。
(ループ無し、#light 名で定義)
----------------------------------------
//ライトの動き、3000遅れて開始 2000で表示
$(function(){
setTimeout(function(){
$('#light').animate({
width: "770px" ,
height: "25px" ,
opacity: 1 ,
}, 2000 );
},3000);
//3000遅らせる指示
});
//ライトの動き、5000保持
$(function(){
setTimeout(function(){
$('#light').animate({
width: "770px" ,
height: "25px" ,
opacity: 1 ,
}, 5000 );
},5000);
//5000遅らせる指示
});
//ライトの動き、2000で消える
$(function(){
setTimeout(function(){
$('#light').animate({
width: "12px" ,
height: "25px" ,
opacity: 0.01 ,
}, 2000 );
},10000);
//10000遅らせる指示
});
//ライトの動き、5000消えた状態保持 17000で動作完
$(function(){
setTimeout(function(){
$('#light').animate({
width: "12px" ,
height: "25px" ,
opacity: 0.01 ,
}, 5000 );
},12000);
//12000遅らせる指示
});
----------------------------------------
>2)これを、setIntervalで8000msec間隔で繰り返します。
これが、判りません。
4個の動作を束ねて、setInterval指示を色々書きましたが、うまく動作しません。
知識不足です。
そこのところ、教えてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jsonテキストデータの並び替え...
-
スマホ上で、左右スワイプで次...
-
sessionStorageを調べています。
-
jqueryのselect2で検索欄の文字...
-
読み込んだQRコードをフォーム...
-
タグを教えてください。
-
ラジオボタンを複数選択したと...
-
<tr>指定した表の行要素をボ...
-
画面遷移を行わずに同一ページ...
-
特定の文字列を複数抜き出した...
-
イラストレーター、縦中横のシ...
-
定積分の近似値を計算する関数c...
-
jsでifの返り値にgetelementbyi...
-
jsで質問です。 formをsubmitし...
-
2025年相性がいい人のサイトの...
-
CookieをWebStoeageに変える
-
Adobe acrobat proでフォームを...
-
Outlookのアカウントがあるとメ...
-
食材の期限を管理するためにGAS...
-
ビデオのJSについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
【JavaScript】confirmのボタン...
-
ジャンクの箇所を一切書かずに...
-
DirectXとOpenGLはどちらが動作...
-
ASP.netで作成したシステムのip...
-
ASP.NET 動的に行を増やすTable
-
webシステムでchrome
-
Stroage HTA
-
[JavaScript] preven...
-
顧客ネットワークで接続がタイ...
-
DelphiでSelectDirectoryを..
-
Firefoxでステータスバーのテキ...
-
思う
-
javascriptでバックグラウンド...
-
ドラクエがプリセットされてるFOMA
-
続続・文字をクリックすると詳...
-
【機能】と【動作】
-
javascriptで書かれたHPをどう...
-
JQuery サーバー上にアップする...
-
C言語のif文について教えてくだ...
-
読み取り専用が外れない
おすすめ情報