本文介绍了在悬停上创建反弹效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我必须开发类似的网站,例如
在本网站中,当您将鼠标悬停在解锁或电话修复按钮上时,会出现一个下拉菜单。有一种方法使这个下拉显示在弹性的方式..像我想要它反弹一点之前,它稳定。这是可能在jQuery,但是可以使用只有css和javascript?

解决方案

如果实验css3是一个选项,你甚至可以没有javascript使用css动画与 @keyframes 规则。



  #parent {position :相对; height:40px;}#onhover {display:none; position:absolute; top:0; } #parent:hover #onhover {display:block; top:30px;动画:mymove 0.8s linear; -moz-animation:mymove 0.8s linear; / * Firefox * / -webkit-animation:mymove 0.8s linear; / * Safari和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% 25px;} 80%{top:35px;} 100%{top:30px;}} @  -  webkit-keyframes mymove / * Safari和Chrome * / {0%{top:0px;} 10%{top:3px;} 40%{top:40px;} 60%{top:25px;} 80%{top:35px;} 100%{top:30px;}} @  -  o-keyframes mymove / * Opera * / {0% 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% :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; }到{-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:轻松; } 93%{-webkit-transform:translate(380px); -webkit-animation-timing-function:ease-in; }到{-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 =animsrc =http://hacks.mozilla.org/ wp-content / uploads / 2011/04 / 75px-Aurora210.pngwidth =75height =75/>  

Mozilla开发人员网络,了解更多详情和浏览器兼容性。


I have to develop a similar website like http://www.unlocknrepair.com/In this website when you hover your mouse over the Unlocking or Phone repair button a dropdown menu appears. Is there a way to make this dropdown appear in bouncy way.. like I want it to bounce a bit before it stabilizes. It is possible in jQuery, but can it be done using only css and javascript?

解决方案

If experimental css3 is an option, you can do it even without javascript using css animations with the @keyframes rule.

#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>

Another "bounce" animation:

$(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" />

See Mozilla Developer Network for more details and browser compatibility.

这篇关于在悬停上创建反弹效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

09-05 20:17
查看更多