つらい・・・

「jQuery」アニメーションをループさせたい

締切済

質問者：adalgorda
質問日時：2015/03/03 12:22
回答数：1件

jQuery初心者です。
画像が上下にふわふわ動くちょっとしたアニメーションを作りたく思っています。
クリックしたら動作するとかでは無くて、
単にページのアクセントとしてゆらゆら上下に動いているようなものです。

下記のサイトを参考に作成してみましたが、うまくいきません。

■参考にしたサイト（Gimmick logさん）
http://gimmicklog.main.jp/jquery/212/

↑↑これの「上下に動かす」にトライしています。
※参考サイトのデモは当方環境で問題無く動作しています。

記述は下記の通りです。

HTML
＝＝＝＝＝
<div>
ああああああああああああああああああ・・・
<p><img src="yurayura.jpg" alt="ゆらゆら画像" width="100" height="100"></p>
</div>
＝＝＝＝＝

CSS
＝＝＝＝＝
div{
position:relative;
}
p{
position:absolute;
right:0;
top:0;
}
＝＝＝＝＝

下記ソースですとまったくアニメーションしません。
＝＝＝＝＝
$(function(){
setTimeout("yurayura()");
});

function yurayura(){
$("p").animate({
marginTop:"10px"
},800).animate({
marginTop:"-10px"
},800);
setTimeout("yurayura()",1600);
}
＝＝＝＝＝

「SetTimeout」部分を省いて
下記記述にすると、ループはしませんが上下に１回だけ動きます。
＝＝＝＝＝
$("p").animate({
marginTop:"10px"
},800).animate({
marginTop:"-10px"
},800);
＝＝＝＝＝

↑↑↑これを何とかループさせたいです。

■環境
・jQuery ver. 2.1.3
・Firefox最新版で確認

かなりの素人で申し訳ありませんが
どうぞよろしくお願い申し上げます。

早々に回答いただき本当に感謝です。
記述していただいたソースで動作しました。素晴らしいです。
※ちなみにHTMLやCSSは質問しやすいように最低限にしていました。本当はpにclass指定しています。
おっしゃる通り、最初のみ増幅が二倍となっているようですが、それも特に気にならないです。

ただ、参考サイトの他の効果（左右に動かすや透過の制御）も使ってみたいと思っているのですが
いただいたソースを理解し、応用するには私には難易度が高いです。
（今後、ちょっとずつ読み解きながら勉強するようにいたします。申し訳ございません。
ご指摘の時間指定の誤差の積み重なり等も本来なら意識すべきなのだと思います。）

No.1の回答に寄せられた補足コメントです。補足日時：2015/03/03 15:42
通報する
「No.1様への補足その２」
ちなみにご質問いただいた参考サイトとの誤差については
最初は参考サイト通り、「増減指定」にしていたのですが、
「絶対値指定」の方でも同様に動作する（１回だけ）のを確認してそのままにしていました。
説明不足で申し訳ありません。
どちらを記述しても同じ挙動です。（←１回だけアニメーションしてストップ）　

現状、参考サイトと当方ページのソースや環境にどのような差があるのかがわからずにいます。
当方の希望が参考サイトと同じソースで・・・というワガママなものになると
実際ページを見ていただくしかないのかもしれませんよね。。。

補足日時：2015/03/03 15:45
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

だいじょうぶ

No.1

回答者： fujillin
回答日時：2015/03/03 13:49

回答の内容を書いてください参考サイトとご質問文にご提示のスクリプトでは

　'-=10px'、'+=10px'　//増減指定
　"10px"、"-10px"　//絶対値指定
などの違いがありますが、ご提示のものを正として・・・

少し視点を変えて、以下の点を修正してみました。
1）対象要素の特定は"p"のみだと、全てのp要素が対象となって
　しまうので、限定の意味でクラスを設定。
2）時間指定（800+800＝1600）のような管理方法だと誤差が積み
　重なる恐れがあるので、callbackを利用して順序で制御。
（ご提示の例の場合は誤差が重なっても、jQueryが内部で管理
　しているので、問題は出ないと思いますが）
3）上記の結果、setTimeout()は用いない形式で記述
4）CSSで指定していないmarginTopではなく、topの値を用いて制御

ということで、以下のような感じではいかがでしょうか？
※ このままだと最初の1/4サイクルのみ1/2の速度になっていますが、
　改良する方法も考えてみてください。

（全角空白は半角に）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
div{ position:relative; }
p.yurayura{ position:absolute; right:0; top:0; }
</style>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery","1");</script>

<script type="text/javascript">

$(function(){
　var amplitude = 10; //1/2振れ幅
　var duration = 800; //1/2サイクル（mmSec)
　var target = $("p.yurayura"); //対象要素

　var flick = function(){
　　amplitude *= -1;
　　target.animate({ top : amplitude }, duration, flick);
　}

　flick();
});

</script>
</head>
<body>

<div>
ああああああああああああああああああ・・・
<p class="yurayura">
<img src="yurayura.jpg" alt="ゆらゆら画像" width="100" height="100">
</p>
</div>

</body>
</html>