I am trying to get a jQuery menu working which hovers out every single item. Here is the fiddle code! . How you will probably see in the result. When I hover one item all are affected. Where is my mistake?
Here is the javascript code:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({height:'200px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({height:'140px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
If the rest is also necessary please take a look at the fiddle code.
It's about CSS. Bigger 'li' expands your 'ul'. Try this:
$(document).ready(function(){
//Remove outline from links
$("a").click(function(){
$(this).blur();
});
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({marginTop:'-60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({marginTop:'0px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
});
You'll need to set a negative top margin when you open it up. Though that could prove problematic with the lis being floated.
//When mouse rolls over
$("li").mouseover(function(){
$(this).stop().animate({'height':'200px','margin-top':'-60px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
//When mouse is removed
$("li").mouseout(function(){
$(this).stop().animate({'height':'140px','margin-top':'0px'},{queue:false, duration:600, easing: 'easeOutBounce'})
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.