在悬停时创建反弹效果

Question

我必须开发类似网站，例如http://www.unlocknrepair.com/ 在此网站中，当您将鼠标悬停在解锁或电话修复按钮上时，会出现下拉菜单。有没有办法让这个下拉菜单以有弹性的方式出现......就像我希望它在稳定之前稍微反弹一样。这是可能的jQuery中，但它可以使用只有CSS和JavaScript？

Answer 1

如果实验CSS3是一个选项，你可以做到这一点，即使没有使用CSS动画与@keyframes规则的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的详细信息和浏览器的兼容性。

Answer 2

是的，它可以使用原生的JavaScript。 Take a look at this document
请注意，我链接到“easeOut”部分，因为我认为这代表球比他们的“反弹”跳得更好一些。
Here's a good example, further down the same page.