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


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

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

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/12/15 15:30:45
  • 終了:2012/12/15 17:17:17

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/12/15 16:31:27

ポイント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>
他1件のコメントを見る
id:Cherenkov

jQuery Easing Plugin | エフェクト動作パターン集プラグイン こういう出来合いのエフェクトもあります。

2012/12/15 17:15:43
id:iori753

完璧です、ありがとうございます。

2012/12/15 17:17:32

その他の回答(0件)

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/12/15 16:31:27ここでベストアンサー

ポイント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>
他1件のコメントを見る
id:Cherenkov

jQuery Easing Plugin | エフェクト動作パターン集プラグイン こういう出来合いのエフェクトもあります。

2012/12/15 17:15:43
id:iori753

完璧です、ありがとうございます。

2012/12/15 17:17:32
id:iori753

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

こちらになります。

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません