Javascript 使用jQuery单击淡入淡出div onclick

我在页面的左右两侧都有一个

div

。当前，右侧的

div

被

隐藏

我试图使用jQuery淡出当前显示的
div
，并通过淡入
隐藏的
div
替换它

我做错了什么？我在这方面遵循了这个例子。

当您单击代码段中的“关于”链接时，应该会发生这种情况：


$（“a”）。在（'click'，function（）上{
$（“#feed show”）.fadeIn（）；
$（“.feed”）.fadeOut（）；
});
a{
颜色：rgba（255,80,70,1）！重要；
文字装饰：无；
}
.导航a{
字体大小：13px；
颜色：rgba（255,80,70,1）；
文字装饰：无；
字体大小：粗体；
}
/*内容---------------------*/
/*导航*/
.导航{
位置：固定；
浮动：左；
宽度：96%；
左：2%；
左边距：-2px；
边框底部：2个实心rgba（255,80,70,1）；
垫底：18px；
背景：白色；
z指数：999；
顶部：0px；
填充顶部：18px；
}
.c1{
最大宽度：24%；
}
.栏目{
位置：相对位置；
浮动：左；
右：1%；
宽度：585px；
}
/*喂*/
.饲料{
宽度：96%；
左：2%；
边缘顶部：75px；
左侧填充：2px；
}
.c2{
最大宽度：49%；
}
.饲料项目{
位置：相对位置；
宽度：100%；
高度：自动；
垫底：25px；
垫面：2.5%；
}
.饲料秀{
位置：绝对！重要；
顶部：-9999px！重要；
左：-9999px！重要；
背景：红色；
}


颜色创意（C-oC）是一个独立的目录，为您提供在英国展出的当前和未来颜色创意作品的最新信息。C-oC旨在为有才华的艺术家的必要提升做出贡献
在英国境内的各种少数民族中。




颜色创意（C-oC）是一个独立的目录，为您提供在英国展出的当前和未来颜色创意作品的最新信息。



您的代码有一些问题

首先，你的
feed show
div在你的
feed
div内。因此，如果你
fadeOut（）
feed
div，里面的一切都将被隐藏

第二，在CSS中，您为
提要显示设置了绝对位置和顶部和左侧属性，因此即使您
fadeIn（）
该元素，您也无法看到它

我对你的代码做了一些修改，这样你可以看到一个div是如何淡出的，另一个是淡入的

干杯


$（“a”）。在（'click'，function（）上{
$（“#feed show”）.fadeIn（）；
$（“.feed”）.fadeOut（）；
});
a{
颜色：rgba（255,80,70,1）！重要；
文字装饰：无；
}
.导航a{
字体大小：13px；
颜色：rgba（255,80,70,1）；
文字装饰：无；
字体大小：粗体；
}
/*内容---------------------*/
/*导航*/
.导航{
位置：固定；
浮动：左；
宽度：96%；
左：2%；
左边距：-2px；
边框底部：2倍实心rgba（255,80,70,1）；
垫底：18px；
背景：白色；
z指数：999；
顶部：0px；
填充顶部：18px；
}
.c1{
最大宽度：24%；
}
.栏目{
位置：相对位置；
浮动：左；
右：1%；
宽度：585px；
}
/*喂*/
.饲料{
宽度：96%；
左：2%；
边缘顶部：75px；
左侧填充：2px；
}
.c2{
最大宽度：49%；
}
.饲料项目{
位置：相对位置；
宽度：100%；
高度：自动；
垫底：25px；
垫面：2.5%；
}
.饲料秀{
显示：无；
背景：红色；
}


颜色创意（C-oC）是一个独立的目录，为您提供在英国展出的当前和未来颜色创意作品的最新信息。C-oC旨在为有才华的艺术家的必要提升做出贡献
在英国境内的各种少数民族中。




颜色创意（C-oC）是一个独立的目录，为您提供在英国展出的当前和未来颜色创意作品的最新信息。



我对您的代码做了一些修改：

我已更改位置：绝对以保持隐藏#feed show with display:none

我已经改变了内部点击功能fadeIn，在淡出结束时执行，以避免奇怪的移动效果


$（文档）.ready（函数（）{
$（“#feed show”）。淡出（0）；
$（“a”）。在（'click'，function（）上{
$（“.feed”）.fadeOut（1000，函数（）{
$（“#feed show”）.fadeIn（1000）；
});
});
});
a{
颜色：rgba（255,80,70,1）！重要；
文字装饰：无；
}
.导航a{
字体大小：13px；
颜色：rgba（255,80,70,1）；
文字装饰：无；
字体大小：粗体；
}
/*内容---------------------*/
/*导航*/
.导航{
位置：固定；
浮动：左；
宽度：96%；
左：2%；
左边距：-2px；
边框底部：2倍实心rgba（255,80,70,1）；
垫底：18px；
背景：白色；
z指数：999；
顶部：0px；
填充顶部：18px；
}
.c1{
最大宽度：24%；
}
.栏目{
位置：相对位置；
浮动：左；
右：1%；
宽度：585px；
}
/*喂*/
.饲料{
宽度：96%；
左：2%；
边缘顶部：75px；
左侧填充：2px；
}
.c2{
最大宽度：49%；
}
.饲料项目{
位置：相对位置；
宽度：100%；
高度：自动；
垫底：25px；
垫面：2.5%；
}
#饲料秀{
显示：无；
}
#饲料秀{
背景：红色；
}


颜色创意（C-oC）是一个独立的目录
这将为您提供有关的最新信息
当前和未来的工作