Jquery 如何用关闭按钮淡入淡出一个Div？

你好，脑力劳动者们

我已经尽我所能了。希望众多JQuery专家中的一位能够帮助我

看看我的

HTML:

以下是我想做的：

默认情况下，contentboard div对某些内容可见，并且该div包含一个closebutton。 当我单击Close按钮时，div会淡出-完美。 当我点击蓝色的“关于”按钮时，我希望div以完美的方式淡出。但在fadein时，关闭按钮不会出现

我不明白为什么会这样。我尝试使用多个选择器，使div和closebutton可以一起淡入淡出，但这也不起作用

如何使closebutton随div显示和消失

非常感谢您的帮助

谢谢

您的

#closebutton

位于

#contentboard

中，因此，当您调用

$（'#contentboard'）.html（strAboutUs）时，它会被删除

试试这个：

我没有在
$（“#contentboard”）
上调用
.html（…）
，而是在
$（“#contentboard>p'）
上调用它，因此它只会替换
内容，并且你的
\closebutton
不会消失


var strAboutUs=“你好，世界！
”+
“你好，世界！”+
“你好，世界！”+
“你好，世界！”+
“你好，世界！”；
$（'#aboutbutton'）。在（'单击'，函数（）上）{
if（$（'#contentboard'）.css（'display'）=='none'）{
$（'#contentboard>p'）.html（strAboutUs）；//已更改
$（'contentboard，'closebutton'）.fadeIn（1000）；
}
否则{
$（“#内容板，#关闭按钮”）.toggle（）；
$（'#contentboard>p'）.html（strAboutUs）；//已更改
$（'contentboard，'closebutton'）.fadeIn（1000）；
}
});
$（'#closebutton'）。在（'单击'，函数（）上）{
$（#contentboard'）。淡出（1000）；
});
#内容板{
宽度：300px；
高度：自动；
左:10 ;；
位置：相对位置；
背景色：#E0F5FF；
-webkit边界半径：10；
-莫兹边界半径：10；
边界半径：10px；
-网络工具包盒阴影：10px 10px 10px#666666；
-moz盒阴影：10px 10px 10px#666666；
盒影：10px 10px 10px#666666；
边际=25px；
填充=25px；
}
.btnblue{
背景：#52baff；
背景图像：-webkit线性渐变（顶部，#52baff，#2980b9）；
背景图像：-莫兹线性梯度（顶部，#52baff，#2980b9）；
背景图像：-ms线性梯度（顶部，#52baff，#2980b9）；
背景图像：-o-线性梯度（顶部，#52baff，#2980b9）；
背景图像：线性渐变（至底部，#52baff，#2980b9）；
-webkit边界半径：10；
-莫兹边界半径：10；
边界半径：10px；
文本阴影：1px 3px 3px#000000；
-网络工具包盒阴影：0px 2px 3px#666666；
-moz盒阴影：0px 2px 3px#666666；
盒影：0px 2px 3px#666666；
字体系列：Arial；
颜色：#ffffff；
字体大小：24px；
填充：25px；
文字装饰：无；
边缘顶部：25px；
左边距：25px；
右边距：25px；
宽度：250px；
}
.btnclose{
背景色：#E5；
颜色：#000000；
字体大小：粗体；
位置：绝对位置；
右：1px；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
}

关于



X

你好，世界

你好，世界

你好，世界

你好，世界！

为了隐藏和显示div all you is fadeIn淡出方法。无需显示none或.html字符串，但如果您想在关闭或关于按钮时更改内容，只需在contentboard p中显示html即可

$('#closebutton').click(function(){
$('#contentboard').fadeOut('normal');
});

$('#aboutbutton').click(function(){
$('#contentboard').fadeIn('normal');
});

你可以改变

$('#contentboard').html(strAboutUs);

为此：

  $('#contentboard *').not("#closebutton").remove();
  /*this line will remove all content but not the closebutton*/

  $('#contentboard').append(strAboutUs);
  /*then you can add what you want to be the new content*/

这是一种。。。当您替换html时，它可能会帮助您删除按钮……
$（'contentboard'）.html（strAboutUs）。。。新的html中没有添加此按钮的按钮，
else
部分中的切换是否只需应用于外部div？这取决于您的期望。如果你对实际结果感到满意，你就没有必要改变它。。清理代码中的这些内容，从
$（'#contentboard，#closebutton'）
中删除
#closebutton
，它不需要Ninetainedo=非常感谢！我真不敢相信改变内容就这么简单！我真的很感谢您的快速回复。CodeGodie=谢谢！我会清理的。单击“关于”按钮时没有要插入的按钮。将按钮标记添加到var strAboutUs后，将显示一个按钮；但是，closebutton的onclick事件$（body）.on（'click'，'element'，function（）{code}）也必须更改，以便它可以单击。我现在明白你的意思了。您重新添加了最初删除的按钮，但为什么要首先删除它？这不是我的意图。我刚刚编写了提问者提供的初始代码，并使其正常工作。在我看来，最好的解决方案是使用类$（'aboutButton，'closeButton'）创建和事件；然后这个类将有一个带有转换的display none属性。下次会这样做的，好先生！谢谢你的建议！我是新手，到时候我会习惯的。
$('#contentboard').html(strAboutUs);

  $('#contentboard *').not("#closebutton").remove();
  /*this line will remove all content but not the closebutton*/

  $('#contentboard').append(strAboutUs);
  /*then you can add what you want to be the new content*/