Weekend Watch Ziv's blog " Make slide Bar menu, how to deal with sliding effect, avoid animation cotton ", see Address: http://www.cnblogs.com/zivxiaowei/p/3462964.html . is through the Jqury animate method to write an interactive effect, of course, he felt that the animation has some cards, so he uses the method of delay processing, avoid animation card, method can be worth learning from. I use the hover method myself, then the animation time is set to be shorter, for 100 milliseconds, the animation runs up, the speed is OK.
I just need to finish the sliding effect of a system's navigation bar recently, specifically, the hover on the navigation bar of an option, at this time there is a background (can be a solid color background or a gradient of the picture), the example I demonstrated with a solid color background, the province to get picture background. Demo screenshot as shown in the following figure:
Demo Address: http://liminjun.sinaapp.com/demo/navigation_animate/
The code is as follows, and the Code is annotated:
. <! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title></title>
<style type= "Text/css" >
Body, #nav, #nav1 {
margin:0px;
}
#navigation Li {
Float:left;
List-style-type:none;
width:80px;
height:50px;
}
#navigation Li A.navlink {
Text-decoration:none;
width:80px;
height:25px;
line-height:25px;
Display:inline-block;
position:relative;
Overflow:hidden;
Text-align:center;
}
#navigation Li Nav_title {
Position:absolute;
top:0;
z-index:1000;
}
#navigation Li Hover_bg {
Position:absolute;
top:25px;
Background-color: #5ab2ce;
height:25px;
width:80px;
BORDER:1PX Solid #ced7ce
border-radius:4px;
}
</style>
<script src= "Http://code.jquery.com/jquery-latest.js" ></script>
<body>
<ul id= "Navigation" >
<li><a class= "NavLink" href= "#" >
<div class= "Nav_title" > Blog Park </div>
<div class= "HOVER_BG" ></div>
</a></li>
<li><a class= "NavLink" href= "#" >
<div class= "Nav_title" > Home </div>
<div class= "HOVER_BG" ></div>
</a></li>
<li><a class= "NavLink" href= "#" >
<div class= "Nav_title" > Bo q </div>
<div class= "HOVER_BG" ></div>
</a></li>
<li><a class= "NavLink" href= "#" >
<div class= "Nav_title" > Flash </div>
<div class= "HOVER_BG" ></div>
</a></li>
</ul>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("#navigation li"). Hover (function () {
$ (this). Find (". Hover_bg"). Animate ({
Top: "0px"
}, "Fast");
}, function () {
$ (this). Find (". Hover_bg"). Animate ({
Top: "25px"
}, "Fast");
});
});
</script>
</body>
Working principle: In a label set 2 Div, one is the title of the navigation bar, the other is to slide up the layer. For a layer to begin without sliding, the position of a label is set to relative, and overflow is set to hidden, and the Li cannot be hidden because, under normal circumstances, there is a drop-down menu under the navigation bar. The position of the 2 Div is set to absolute. Then, in the hover method, the top value of the HOVER_BG layer is animated to achieve an interactive effect of the background color block moving upwards. In the animation time setting, I write is "fast", in 3 browser test, animation is still smooth, so for the moment did not consider using delay to deal with the problem of animation cotton.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
