在懸停時創建一個反彈效果

Question

我必須開發類似http://www.unlocknrepair.com/的類似網站。在此網站上，當您將鼠標懸停在解鎖或手機維修按鈕上時，會出現一個下拉菜單。 有沒有辦法讓這個下拉列表以有彈性的方式出現..就像我希望它在穩定之前反彈一點。 它可以在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 。