仕事を頑張る人のおしりトラブル対策

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》に書き足して、ループできるなら、具体的記述で教えてください。

以上、よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (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秒後から繰返し

});

※時間やタイミング、アニメーションの内容などは適宜調整してください。
    • good
    • 0
この回答へのお礼

書き方が、判りにくく済みません。

delayとjQueryのバージョンに問題あるらしく、
教えていただいた状態では動きませんでした。

//繰り返しの1回分を定義 の内部は、前の自前の
無駄の多い書き方を入れたら動作しました。

ちょっと不細工ですが、とりあえず動いているので。
ありがとうございました。
お礼を申しあげます。

お礼日時:2013/11/21 10:11

考え方のみですが…



>動作完了 → 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指示を色々書きましたが、うまく動作しません。
知識不足です。

そこのところ、教えてください。

補足日時:2013/11/17 14:11
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qフォトショップ 白黒画像を反転させるには?

フォトショップ(CS3)を使い始めたばかりの初心者です。

黒のバッググラウンドに白文字で書かれたイメージを、白地に黒文字へと反転させたいのですが、どのように操作すればよいのでしょうか?

アドバイスを頂けましたらと思います。
どうぞよろしくお願いいたします!

Aベストアンサー

Winなら「Ctrl」+「I」キーで、
Macなら「コマンド」+「I」キーで反転できます。

QJavaScriptで画像を横移動

JavaScriptを使って画像を横移動させたいと思っています。

イメージとしてはこちらのサイトにある動きそのままなのですが、
http://www.wind.sannet.ne.jp/alfix/javascript/img/2.html

<BODY onLoad="moveImgX()">を使わずに、
<HEAD>~</HEAD>内への記述と、
<IMG~>の記述だけで実行されるようなものが理想です。

ご教授お願い致します。

Aベストアンサー

一番簡単な方法としては、

bodyタグ内のonload="~"を消して、suctiptタグ内の最後にでも
 window.onload = moveImgX;
の1行を追加しておく。
(全角空白は半角に)


対象のidとか移動する位置などは、表示内容に応じた調整が必要でしょう。


人気Q&Aランキング

おすすめ情報