jQuery菜单动画问题
问题描述:
我希望你能帮我解决我的问题。 你可以看一下菜单的当前工作的 www.darshakspadia.com/demo/jQuery-Issue/index.htmljQuery菜单动画问题
我的问题是,我想这个菜单
- 公开赛上点击&不上徘徊。
- 当我点击其他导航按钮时关闭活动关闭。
这里是jQuery的我使用这种效果
$(document).ready(function(){
//Remove outline from links
$(".home-nav a").click(function(){
$(this).blur();
});
//When mouse rolls over
$(".home-nav li").mouseover(function(){
$(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'})
});
//When mouse is removed
$(".home-nav li").mouseout(function(){
$(this).stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'})
});
});
如果我改变“.mouseover”到“点击”问题比它出现的点击,但只要我悬停在当前框中消失。
而且,如果我将“.mouseover”&“.mouseout”更改为.click什么都不会发生。
我的主要问题是我需要这样的效果。
请有人帮忙,因为这对我来说真的很紧急。
如果你想,我甚至可以共享使用,这样就可以帮助我所需要的文件..
答
你可以试试这个,删除您的鼠标悬停及移出。
$(".home-nav li").click(function(){
$(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'});
$(this).siblings().stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
});
答
您需要使用click事件而不是mouseover和out。在点击功能中,您需要关闭所有其他功能并打开点击功能。
$(document).ready(function(){
//Remove outline from links
$(".home-nav a").click(function(){
$(this).blur();
});
$(".home-nav li").click(function(){
//Close all others
$(".home-nav li").stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
//Open this one
$(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'})
});
});
答
可以使用bind()多个事件方法,并与一些CSS技巧来保持高度还是:
CSS
.active { height:260px !important; } // to hold steady
的jQuery:
$(".home-nav li").bind({
click: function(){
$(".home-nav li").stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
$(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'},
function(){//when animation complete
$(".home-nav li").removeClass('active');//to remove class from all
$(this).addClass('active');//adds class clicked one
});
},
mouseover: function(){
$(this).stop().animate({height:'260px'},{queue:false, duration:800, easing: 'easeOutBounce'});
},
mouseleave: function(){
$(this).stop().animate({height:'80px'},{queue:false, duration:800, easing: 'easeOutBounce'});
}
});
答
对于以上问题,我已在http://codebins.com/bin/4ldqpau/
上完成垃圾箱所以,尽量以下脚本:
function hideMenu() {
$(".home-nav li").each(function() {
$(this).stop().animate({
height: '80px'
}, {
queue: false,
duration: 800,
easing: 'easeOutBounce'
});
});
}
$(function() {
$(".home-nav li").click(function() {
hideMenu();
$(this).stop().animate({
height: '260px'
}, {
queue: false,
duration: 800,
easing: 'easeOutBounce'
});
});
});
在标题设置“紧急”不会让你更快的答案。如果有的话,完全相反... – Alnitak 2012-07-16 11:15:39
@Darshak - 看到改变这个职位的标题更吸引人,你已经有3个答案和一对upvotes ... – 2012-07-16 11:23:59