javascript - ホバーにバウンス効果を作成する

Question

http://www.unlocknrepair.com/のような同様のWebサイトを開発する必要があります 。このWebサイトで、マウスを[ロック解除]または[電話の修復]ボタンに合わせると、ドロップダウンメニューが表示されます。このドロップダウンを弾むように表示する方法はありますか..安定する前に少しバウンドさせたいようです。jQueryで可能ですが、cssとjavascriptのみを使用して実行できますか？

Answer 1

はい、ネイティブの JavaScript を使用して可能です。このドキュメントを見て
ください 注、「easeOut」セクションにリンクしています。これは、ボールのバウンスが「バウンス」よりも少し優れていることを表していると思うからです。
同じページのさらに下に、良い例があります。

Answer 2

実験的な css3 がオプションである場合は、@keyframesルールで css アニメーションを使用して、javascript がなくても実行できます。

#parent {
    position:relative;
     height: 40px;
}

#onhover {
    display: none;
    position: absolute;
    top: 0;
    
}

#parent:hover #onhover {
    display: block;
    top: 30px;
    animation:mymove 0.8s linear;
    -moz-animation:mymove 0.8s linear; /* Firefox */
    -webkit-animation:mymove 0.8s linear; /* Safari and Chrome */
    -o-animation:mymove 0.8s linear; /* Opera */
    -ms-animation:mymove 0.8s linear; /* IE */
}

@keyframes mymove
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-moz-keyframes mymove /* Firefox */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-o-keyframes mymove /* Opera */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

@-ms-keyframes mymove /* IE */
{
0%   {top:0px;}
10%  {top:3px;}
40%  {top:40px;}
60%  {top:25px;}
80%  {top:35px;}
100% {top:30px;}
}

<div id="parent">hover me<div id="onhover">hovering</div></div>

別の「バウンス」アニメーション:

$(function() {

$(document.body).delegate( "img", "mouseenter", function() {
    var $this = $(this).addClass("right");
    setTimeout(function() {
        $this.removeClass("right");
    }, 2000);
});
    
});

body { font-size: .7em; font-family: Arial, Helvetica, "Liberation Sans", sans-serif; padding: 0 !important; }
img {
    -moz-transition: -moz-transform 1s ease-in;
    -webkit-transition: -webkit-transform 1s ease-in;
    -o-transition: -o-transform 1s ease-in;
    -ms-transition: -ms-transform 1s ease-in;
}
#anim.right {
    -moz-animation-name: bounce;
    -moz-animation-duration: 1s;
    -moz-animation-iteration-count: 1;
    -moz-transform: translate(400px);
    -moz-transition: none;

    -webkit-animation-name: bounce;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    -webkit-transform: translate(400px);
    -webkit-transition: none;
}

@-moz-keyframes bounce {
  from {
    -moz-transform: translate(0px);
    -moz-animation-timing-function: ease-in;
  }
  60% {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
  }
  73% {
    -moz-transform: translate(360px);
    -moz-animation-timing-function: ease-in;
  }
  86% {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
  }
  93% {
    -moz-transform: translate(380px);
    -moz-animation-timing-function: ease-in;
  }
  to {
    -moz-transform: translate(400px);
    -moz-animation-timing-function: ease-out;
  }
}

@-webkit-keyframes bounce {
  from {
    -webkit-transform: translate(0px);
    -webkit-animation-timing-function: ease-in;
  }
  60% {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
  }
  73% {
    -webkit-transform: translate(360px);
    -webkit-animation-timing-function: ease-in;
  }
  86% {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
  }
  93% {
    -webkit-transform: translate(380px);
    -webkit-animation-timing-function: ease-in;
  }
  to {
    -webkit-transform: translate(400px);
    -webkit-animation-timing-function: ease-out;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<img id="anim" src="http://hacks.mozilla.org/wp-content/uploads/2011/04/75px-Aurora210.png" width="75" height="75" />

詳細とブラウザの互換性については、Mozilla Developer Networkを参照してください。