Heim >Web-Frontend >HTML-Tutorial >我想hover时 菜单平滑收回去,怎么实现啊_html/css_WEB-ITnose

我想hover时 菜单平滑收回去,怎么实现啊_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:40:071110Durchsuche

怎样hover  出 list 时 平滑的收回去啊
示例是这个

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


回复讨论(解决方案)

下面是css
[code=css][/  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,\5b8b\4f53;
            transition:all .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
            border-bottom-left-radius: 8%;
            /*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);
        }
        #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;
            /*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]

手中没有easing.js,,,运行不了楼主的代码,,,不过可以给楼主一点提示。。。
jquery的动画,,,,怎么动出来,,,,就可以怎么动回去。。。。
e.g.:
拉宽:$("id").animate({width:'51px'});
缩回:$(“id”).animate({width:'0px'});

   



    

        
IUX

        

        

                
  •  HomeH

  •             
  •  ProductH

  •             
  •  DesigerH

  •             
  •  BlogH

  •             
  •  AboutH

  •         

        

    


    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父层就收回

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn