当导航关闭时隐藏文本导航
当导航关闭时隐藏文本导航
提问于 2013-11-29 07:34:36
这里我创建了一个导航，但是当您单击导航'+‘时，所有的链接都会立即显示出来，我希望它们与动画同步显示。
以下是小提琴链接：http://jsfiddle.net/6xVNz/3/
jquery代码：
$("#open").click(function(){
$(".nav, #close").show();
$(".nav li").show();
$(".nav li").each(function (i) {
$(this).delay(50*i).animate({width:150},50); // Change 300 to something else if you like
});
$("#open").hide();
});
$("#close").click(function(){
$("#close").hide();
$($(".nav li").get().reverse()).each(function (i) {
$(this).delay(50*i).animate({width:0},50); // Change 300 to something else if you like
});
$("#open").show();
});回答 5
Stack Overflow用户
回答已采纳
发布于 2013-11-29 07:40:52
只需像这样修改代码：
$("#open").click(function(){
$(".nav, #close").show();
$(".nav li").show();
$(".nav li").each(function (i) {
$(this).delay(50*i).animate({width:150},50); // Change 300 to something else if you like
});
$("#open").hide();
});
$("#close").click(function(){
$("#close").hide();
$($(".nav li").get().reverse()).each(function (i) {
$(this).delay(50*i).animate({width:0},50); // Change 300 to something else if you like
});
$("#open").show();
$(".nav li").hide('slow');
});Stack Overflow用户
发布于 2013-11-29 08:00:54
$("#open").click(function(){
$(".nav, #close").show();
$(".nav li").show();
$(".nav li").each(function (i) {
$(this).delay(50*i).animate({width:150},50); // Change 300 to something else if you like
});
$("#open").hide();
});
$("#close").click(function(){
$("#close").hide();
$($(".nav li").get().reverse()).each(function (i) {
$(this).delay(50*i).animate({width:0},50); // Change 300 to something else if you like
});
$("#open").show();
$(".nav li").hide('slow');
});Stack Overflow用户
发布于 2013-11-29 11:41:20
这应该能起作用：
$("#open").click(function(){
$(".nav, #close").show();
$(".nav li").each(function (i) {
$(this).delay(50*i).animate({width:150},50).show(50);
});
$("#open").hide();
});
$("#close").click(function(){
$("#close").hide();
$($(".nav li").get().reverse()).each(function (i) {
$(this).delay(50*i).animate({width:0},50).hide(50);
});
$("#open").show();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20280567
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号