ホームページ > 記事 > ウェブフロントエンド > ホバー時にメニューをスムーズに引っ込めるようにしたい this_html/css_WEB-ITnose を実現する方法。
ホバー時にメニューをスムーズに引っ込めるようにしたい this_html/css_WEB-ITnose を実現する方法。
- WBOYオリジナル
- 2016-06-24 11:40:071068ブラウズ
リスト外にホバリングしたときにスムーズに撤回する方法
例はこれです
<!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>
discuseディスカッション（解決策） line-height: 40px; font: "Microsoft YaHei",tahoma,arial,Hiragino Sans GB,5b8b4f53; トランジション:all .5s cubic-bezier(0.68, -0.55, 0.265 , 1.55);
border-bottom-left-radius : 8%; 再生: なし;
位置: 絶対;
背景: 106,0.5); 背景: rgba(106, 90 , 205,0.5) ; 0.5）;背景: rgba(0,0,0,0.8);
高さ: 40px;
表示: ブロック;
位置: 相対;
コード]
私は easing.js を手元に持っていないので、元の投稿者のコードを実行することはできませんが、いくつかのヒントを提供することはできます。 。 。
jquery アニメーションでは、移動したのと同じ方法で元に戻すことができます。 。 。 。
例:
広げる: $("id").animate({width:'51px'});
縮小: $("id").animate({width:'0px'});
a{
テキスト装飾: なし。
カラー: #333333;
}
.bar{
list-style: none;
幅:150ピクセル;
高さ:40ピクセル;
行の高さ: 40px;
フォント:「Microsoft YaHei」、tahoma、arial、Hiragino Sans GB、5b8b4f53;
移行: すべて .5 秒の簡単さ。
境界線の左下半径: 8%;
トップ:-200px;
/*display: block;*/
position: relative;
オーバーフロー: 非表示;
}
.translate1{
top:40px;
}
.remove{
top:-40px;
}
.bar:hover {
display: block;
高さ:60ピクセル;
行の高さ: 60px;
}
.tg{
位置: 相対;
左: 200ピクセル;
オーバーフロー: 非表示;
トランジション: 左 2秒 イーズ。
}
.bar:hover .tg{
left: 80px;
}
#bar1{
背景: rgba(255, 106 ,106,0.5);
}
#bar2{
background: rgba(106, 90 ,205,0.5);
}
#bar3{
背景: rgba(127, 255, 0,0.5);
}
#bar4{
背景: rgba(99 ,184, 255,0.5);
}
#bar5{
背景: rgba(144 ,238 ,144,0.5);
}
.list{
位置: 相対;
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
e01cc1c19b6c5b5592d5c014eb2e9f71
ff6d136ddc5fdfeffaf53ff6ee95f185
6b16c4f23688d91c3832da1c0ac0f0ec45a2772a6b6107b401db3c9b82c049c2 15ce3e7494a3f16b144b37e8fd65c1daホーム5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114eac914f667123bcdcccb53b6fffd38b7H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
1292f9ea000e98c261c49d025f2d6494 45a2772a6b6107b401db3c9b82c049c215ce3e7494a3f16b144b37e8fd65c1da製品5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114eac914f667123bcdcccb53b6fffd38b7H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
8b5e04bfc76d17549dbe80090e10a172 45a2772a6b6107b401db3c9b82c049c215ce3e7494a3f16b144b37e8fd65c1daデジガー5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114eac914f667123bcdcccb53b6fffd38b7H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
d584ff1d9e0e9ca6517c44d8f62e452845a2772a6b6107b401db3c9b82c049c2 15ce3e7494a3f16b144b37e8fd65c1daブログ5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114eac914f667123bcdcccb53b6fffd38b7H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
686ce82119073fb94a0c7f04b4a5609e 45a2772a6b6107b401db3c9b82c049c215ce3e7494a3f16b144b37e8fd65c1da概要5db79b134e9f6b82c0b36e0489ee08ed54bdf357c58b8a65c66d7c19c8e4d114eac914f667123bcdcccb53b6fffd38b7H54bdf357c58b8a65c66d7c19c8e4d114bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
36cc49f0c466276486e50c850b7e4956
window.onload=function(){
//code
$("#logo").animate(
{"top":"0px",
"不透明度":1
}, {
easing: 'easeOutQuart ',
duration: 1800
)
$("#logo").addClass("shake");
}
//css バージョン
$("ul").hover(function(){
$(".bar").addClass("translate1");
},function(){
$(" .bar").removeClass("translate1");
})
書かれていませんが、考え巡回することができます:
最初の種類: 平滑展出後、一機能を着いて、リストを再生します。二种：hover list展出，hover list父层就收回