

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」部分を省いて
下記記述にすると、ループはしませんが上下に1回だけ動きます。
=====
$("p").animate({
marginTop:"10px"
},800).animate({
marginTop:"-10px"
},800);
=====
↑↑↑これを何とかループさせたいです。
■環境
・jQuery ver. 2.1.3
・Firefox最新版で確認
かなりの素人で申し訳ありませんが
どうぞよろしくお願い申し上げます。
A 回答 (1件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
回答の内容を書いてください参考サイトとご質問文にご提示のスクリプトでは
'-=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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
onLoadをbodyタグ以外で使用する
-
JavaScript で指定した月日に別...
-
【javascript クロスブラウザ...
-
jQuery処理は、ページを読み込...
-
<a href="#" …>の意味を教えて...
-
マウスクリックした地点のテキ...
-
html メールリンクにて自動ファ...
-
Cookieの回数で閲覧制限、javas...
-
window.openの後にエンコードを...
-
noscriptについて
-
ページ内、ピクセル移動でスム...
-
HTMLソースからURLだけを抜き出...
-
キーを押している間の時間を計...
-
背景設定で
-
リンクの表現
-
リンクに飛ばない・・・
-
スライド写真で2、3枚目をラ...
-
jQueryでdivごとリンクする際の...
-
メニューを作成しています。
-
function の return 値を表示し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでalertの文字列をコ...
-
onLoadをbodyタグ以外で使用する
-
【javascript クロスブラウザ...
-
ブラウザをJavaScriptで最小化…
-
画像ファイルのアドレスに今日...
-
セキュリティ保護の警告が出な...
-
変数の代入値を外部の.txtファ...
-
macでjavascriptを記述するには...
-
iframe内をリロードできますか?
-
1 ~ Nまでの整数の総和(1+2+3....
-
javascriptにてonclickを無効
-
月ごとに表示するページを変える
-
jQuery処理は、ページを読み込...
-
特定のページから移動してきた...
-
スムースクロール
-
OnMouseDownでNetscapeがアボート
-
指定の年月日時にcssを自動で切...
-
自分でJavaScriptを書いたので...
-
日替わりメッセージの表示
-
JavaScriptを有効にする文言を...
おすすめ情報
早々に回答いただき本当に感謝です。
記述していただいたソースで動作しました。素晴らしいです。
※ちなみにHTMLやCSSは質問しやすいように最低限にしていました。本当はpにclass指定しています。
おっしゃる通り、最初のみ増幅が二倍となっているようですが、それも特に気にならないです。
ただ、参考サイトの他の効果(左右に動かすや透過の制御)も使ってみたいと思っているのですが
いただいたソースを理解し、応用するには私には難易度が高いです。
(今後、ちょっとずつ読み解きながら勉強するようにいたします。申し訳ございません。
ご指摘の時間指定の誤差の積み重なり等も本来なら意識すべきなのだと思います。)
「No.1様への補足その2」
ちなみにご質問いただいた参考サイトとの誤差については
最初は参考サイト通り、「増減指定」にしていたのですが、
「絶対値指定」の方でも同様に動作する(1回だけ)のを確認してそのままにしていました。
説明不足で申し訳ありません。
どちらを記述しても同じ挙動です。(←1回だけアニメーションしてストップ)
現状、参考サイトと当方ページのソースや環境にどのような差があるのかがわからずにいます。
当方の希望が参考サイトと同じソースで・・・というワガママなものになると
実際ページを見ていただくしかないのかもしれませんよね。。。