下記URL中段「製品」の部分の、ボトルにフォーカスした際に下に沈んでまた上にふわっと少し戻る、というこのJavascriotを自分で書くとした場合のソースを教えてください。
focusした場合に起動して、スピードも動きの幅も徐々に減っていく感じだと思うのですが、Javascriptはほぼ知識がないので、具体的なソースを教えてください。
（Jquery等を使う形でもOKです。）
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
ベストアンサー
-
Cherenkov
満足200pt
urlが無いので想像で
http://jsfiddle.net/EKpJ6/<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script> $(function() { $('#box').mouseover(function(){ $(this).animate({top:"10px"}, 200).animate({top:"0px"}, 200); }); }); </script> </head> <body> <div id="box" style="height:200px;width:200px;border:1px black solid;margin:50px;position:absolute;">hoge</div> </body> </html>
cssのtopなどを変更する場合はpositionをstatic以外にする必要があります。
参考：［JS］ホバー時、ふんわりとバウンドするモーションをつけるスクリプト | コリス
追記：
http://jsfiddle.net/EKpJ6/1/<!DOCTYPE HTML> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> <script> $(function() { $('#box').hover(function(){ $(this).animate({top:"35px"}, 200).animate({top:"20px"}, 300); }, function(){ $(this).animate({top:"0px"}, 400); }); }); </script> </head> <body> <div id="box" style="height:200px;width:200px;border:1px black solid;margin:50px;position:absolute;">hoge</div> </body> </html>
-
maintour15その他の回答
この質問へのコメント
質問の情報
- 登録日時
- 2012-12-15 15:30:45
- 終了日時
- 2012-12-15 17:17:17
- 回答条件
- 1人5回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
OKI レーザープリンタートナーの再生品でおすすめのメーカー教えてください，トラブルが少なく，リーズナブ…
relattori
1
-
PHPでのクレジット決済について質問です。 自分のサイトのデータベースに顧客のクレジットカードの情報が入…
aiomock
-
水泳の授業が１０月まである学校ありますか？
kuth61
-
国家公務員法に関する質問 第84条 (懲戒権者) 1 懲戒処分は、任命権者が、 これを行う。 2 人事院は、この…
minminjp2001
-
https://www.google.co.jp/maps/@37.6881983,139.9472867,3a,32.4y,177.64h,107.51t/data=!3m8!1e1!3m6!1sA…
匿名質問者2