I want the menu to be retracted smoothly when hovering. How to achieve this_html/css

I want the menu to be retracted smoothly when hovering. How to achieve this_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:40:07

Original

1113 people have browsed it

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>

Copy after login

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' });

不会写，但可以给你思路：
第一种：平滑展出后，紧跟着一个function，让list收回。
第二种：hover list展出，hover list父层就收回