人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記URL中段「製品」の部分の、ボトルにフォーカスした際に下に沈んでまた上にふわっと少し戻る、というこのJavascriotを自分で書くとした場合のソースを教えてください。

focusした場合に起動して、スピードも動きの幅も徐々に減っていく感じだと思うのですが、Javascriptはほぼ知識がないので、具体的なソースを教えてください。

(Jquery等を使う形でもOKです。)

●質問者: maintour15
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● Cherenkov
●200ポイント ベストアンサー

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>

Cherenkovさんのコメント
URL先を確認して回答1に追記しました。

Cherenkovさんのコメント
[http://alphasis.info/2011/05/jquery-easing-plugin/:title=jQuery Easing Plugin | エフェクト動作パターン集プラグイン] こういう出来合いのエフェクトもあります。

maintour15さんのコメント
完璧です、ありがとうございます。

質問者から

大変失礼致しました。
http://activatedrinks.com/#/products

こちらになります。


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ