Home >Web Front-end >HTML Tutorial >I want the menu to be retracted smoothly when hovering. How to achieve this_html/css_WEB-ITnose
I want the menu to be retracted smoothly when hovering. How to achieve this_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:40:071110browse
How to retract smoothly when hovering out of the list
The example is this
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../css/reset.css"/> <style> </style></head><body><div id="header"> <div id="nav"> <div id="logo">IUX</div> <div class="list"> <ul> <li class="bar" id="bar1"> <a href="###">Home</a></li> <li class="bar" id="bar2"> <a href="###">Product</a></li> <li class="bar" id="bar3"> <a href="###">Desiger</a></li> <li class="bar" id="bar4"> <a href="###">Blog</a></li> <li class="bar" id="bar5"> <a href="###">About</a></li> </ul> </div> </div></div></body><script src="../jquery.min.js"></script><script SRC="../easing.js"></script><script>$(function(){ window.onload=function(){ //code $("#logo").animate( {"top":"0px", "opacity":1 }, { easing: 'easeOutElastic', duration: 1800 } ) }/*$("#logo").hover(function(){ $(".bar").addClass("init1")})*/ $("#logo").hover(function(){ $("#bar1").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration: 200, compete:function(){ } }), $("#bar2").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration: 250 }), $("#bar3").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration:280 }), $("#bar4").addClass("test").animate({ "top":"40px" }, { easing: 'easeInOutQuint', duration: 310 }) $("#bar5").addClass("test").animate({ "top":"40px" }, { easing: 'easeOutBounce', duration: 330 }) }),function(){ alert("jjjj"); $(".bar").removeClass("test"); $(".bar").removeAttr("style") }})</script></html>
Reply to discussion (solution)
The following is css
[code=css][/ a{
text-decoration: none;
color: #333333;
.bar{
list-style: none;
width:150px;
height:40px; line-height: 40px; ",tahoma,arial,Hiragino Sans GB,5b8b4f53;
transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55); 🎜 > /*border-bottom-right-radius: 5%;*/
top:40px;
display: none;
position: absolute;
}
.bar: hover {
height:60px;
/*line-height: 60px;*/
}
#bar1{
background: rgba(255, 106,106 , 0.5); 🎜> background: rgba(127, 255 , 0,0.5);
5{
background: rgba(144 ,238,144,0.5); /*height:200px;*/
}
.init1{
position: relative;
display:block;
}
#logo{
background: rgba(0,0,0,0.8);
width:150px;
Height:40px;
position: absolute;
display: block;
top:-40px;
color:#ffffff;
}
.test{
display:block;
top:-40px;
position: relative;
}
code]
I don’t have easing.js in my hands, and I can’t run the original poster’s code, but I can give you some tips. . .
jquery animation,,,, you can move it back the same way you move it out. . . .
e.g.:
Widen: $("id").animate({width:'51px'});
Retract: $("id").animate({width:'0px' });
c9ccee2e6ea535a969eb3f532ad9fe89
a{
text-decoration: none;
color: #333333;
}
.bar{
list-style: none;
width:150px;
height:40px;
line-height: 40px;
font: "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,5b8b4f53;
transition:all .5s ease;
border-bottom-left-radius: 8%;
top:-200px;
/*display: block;*/
position: relative;
overflow: hidden;
}
.translate1{
top:40px;
}
.remove{
top:-40px;
}
.bar:hover {
display: block;
height:60px;
line-height: 60px;
}
.tg{
position: relative;
left: 200px;
overflow: hidden;
transition: left 2s ease;
}
.bar:hover .tg{
left: 80px;
}
#bar1{
background: rgba(255, 106 ,106,0.5);
}
#bar2{
background: rgba(106, 90 ,205,0.5);
}
#bar3{
background: rgba(127, 255, 0,0.5);
}
#bar4{
background: rgba(99 ,184, 255,0.5);
}
#bar5{
background: rgba(144 ,238 ,144,0.5);
}
.list{
position: relative;
width:150px;
}
#logo{
background: rgba(0,0,0,0.8);
width:150px;
height:40px;
position: absolute;
display: block;
color:#ffffff;
line-height: 40px;
text-align: center;
}
.test{
display:block;
transition:all .5s ease;
position: relative;
top:-40px;
}
@-webkit-keyframes resize {
0% {
padding: 0;
}
50% {
padding: 30px 0px;}
100%{
padding:0px 0;
}
}
.shake {
-webkit-animation-name: resize;
-webkit-animation-duration: .5s;
-webkit-animation-timing-function: ease-in-out;
}
.tg_right{
left:80px;
}
531ac245ce3e4fe3d50054a55f265927
6c04bd5ca3fcae76e30b72ad730ca86d
4de7f166fcc9e016381fa981074c83d1
e884342cdf9156d36799ee58b27ee8fb
ff2a6d4326e3f16f82bbf91171c41becIUX16b28748ea4df4d9c2150843fecfba68
109d3204b6cf069cbb05f014ef9cc263
ff6d136ddc5fdfeffaf53ff6ee95f185
e4e6496ce15ec249c72300d2eb388c0145a2772a6b6107b401db3c9b82c049c2 e2a66f3cf96b395dc3d4bf644e5d0867Home5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114a4f389786ecad1c52f021f67575c7448H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
d3f051808dc097ddc96f1f67a627f166 45a2772a6b6107b401db3c9b82c049c2e2a66f3cf96b395dc3d4bf644e5d0867Product5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114a4f389786ecad1c52f021f67575c7448H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
e8f36550106559ed3fb400789b7126f6 45a2772a6b6107b401db3c9b82c049c2e2a66f3cf96b395dc3d4bf644e5d0867Desiger5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114a4f389786ecad1c52f021f67575c7448H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
b58a35d5e7f23f8d21b66258fec5417045a2772a6b6107b401db3c9b82c049c2 e2a66f3cf96b395dc3d4bf644e5d0867Blog5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114a4f389786ecad1c52f021f67575c7448H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
de9ddb0295ca20c5e4b7ae1560f7605d 45a2772a6b6107b401db3c9b82c049c2e2a66f3cf96b395dc3d4bf644e5d0867About5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114a4f389786ecad1c52f021f67575c7448H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
window.onload=function(){
//code
$("#logo").animate(
{"top":"0px",
"opacity":1
}, {
easing: 'easeOutQuart',
duration: 1800
}
)
$("#logo").addClass("shake");
}
//css 版本
$("ul").hover(function(){
$(".bar").addClass("translate1");
},function(){
$(".bar").removeClass("translate1");
})
不会写，但可以给你思路：
第一种：平滑展出后，紧跟着一个function，让list收回。
第二种：hover list展出，hover list父层就收回