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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

2941閲覧

jqueryの.animateを特定の要素にだけ適用させたい

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/10/09 15:40

お世話になります。

自作したイラストを画像としてHTMLで表示し、それをjqueryの.animateを使って上下にゆらゆら揺れるものを作っています。

揺れるのはできたのですが、画像の下にあるボタンも一緒に動いてしまいます。
画像のみを動かすにはどうしたらいいでしょうか?

html

1<body> 2 <div><img src="img/gazou.png" class="gazou"/></div> 3 <form> 4 <input type="text" id="username" placeholder="User name"/> 5 <input type="password" id="password" placeholder="password"/> 6 <input type="submit" id="login" value="新規登録・ログイン" /> 7 </form> 8 </body>

css

1$(function () { 2 setTimeout('rect()'); //アニメーションを実行 3 }); 4 5 function rect() { 6 $('.gazou').animate({ 7 marginTop: '-=10px' 8 }, 800).animate({ 9 marginTop: '+=10px' 10 }, 800); 11 setTimeout('rect()', 1600); //アニメーションを繰り返す間隔 12 }

よろしくお願いいたします。

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

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

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

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

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

guest

回答2

0

ベストアンサー

画像の下にあるボタンも一緒に動いてしまいます。

position: absolute; で浮かすとか何か対処しないと動きます。


質問とはそれますが、CSSアニメーションでも同じようなことができると思います。

CSS

1.gazou { 2 animation: updown .3s linear 0s infinite alternate none running; 3} 4 5@keyframes updown { 6 0% { 7 transform: translate(0,-10px); 8 } 9 100% { 10 transform: translate(0,10px); 11 } 12} 13```**動くサンプル:**[https://jsfiddle.net/252260pw/1/](https://jsfiddle.net/252260pw/1/) 14 15【CSSアニメーション 入門 - Qiita】 16[http://qiita.com/soarflat/items/4a302e0cafa21477707f](http://qiita.com/soarflat/items/4a302e0cafa21477707f)

投稿2016/10/09 16:09

kei344

総合スコア69364

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

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

退会済みユーザー

退会済みユーザー

2016/10/13 08:40

うまくいきました! 参考リンクまではってくださり、ご丁寧にどうもありがとうございました。助かりました。
退会済みユーザー

退会済みユーザー

2016/10/13 08:53

度々すみません、 これってそのままだとスマホでは動かないのでしょうか? monacaを使っているのですが、PCブラウザのプレビューだと動くのですが実機(iPhone)だと動かなくて…
退会済みユーザー

退会済みユーザー

2016/10/19 04:18

ご丁寧にどうもありがとうございました。頑張ってやってみます!
guest

0

画像ブロックの高さが下の要素の位置に影響してしまっているのが原因ですね。

<div><img src="img/gazou.png" class="gazou"/></div>

こちらの親divに下記styleを指定します。
position: relative;
height: 固定値;
※heightについて--子要素の.gazouブロックをabsoluteすると親要素は子要素の高さが取れなくなるため
親要素のHeightを指定しないと内部の高さが0なってしまいます。

子要素の.gazouに対しては
position:absolute;
top:0px;
を指定してみてください。

加えてrect()内のmarginTopで調整している箇所をtopで位置調整すれば
最小限の変更で済むかと思います。

kei344様の回答のようにCSSアニメーションでできるならば
CSSを頼った方がスマートかと思います。

投稿2016/10/10 01:06

T6App

総合スコア16

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

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

退会済みユーザー

退会済みユーザー

2016/10/13 08:39

原因がわかってとてもすっきりしました!どうもありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問