如何使用关闭按钮淡入和淡出 Div？

Question

大家好，Brainiacs！

我已尽我所能。希望那里的众多 JQuery 专家中的一位可以帮助我。

看看我的JsFiddle

HTML：

<button type="button" id="aboutbutton" class="btnblue">About</button>

<br /><br />


<div id="contentboard">
      <button type="button" id="closebutton" class="btnclose">X</button>

      <p>
          Hello World!<br />
          Hello World!<br />
          Hello World!<br />
        Hello World!
      </p>
</div>

JS：

$('#aboutbutton').on('click', function() {
    if($('#contentboard').css('display') == 'none') {
      $('#contentboard').html(strAboutUs);
      $('#contentboard,#closebutton').fadeIn(1000);
    }
    else {
      $('#contentboard,#closebutton').toggle();
      $('#contentboard').html(strAboutUs);
      $('#contentboard,#closebutton').fadeIn(1000);
    }

  });


$('#closebutton').on('click', function() {
      $('#contentboard').fadeOut(1000);
});

这是我正在尝试做的事情：

默认情况下，内容板 div 带有一些内容是可见的，并且 div 包含一个关闭按钮。 当我单击关闭按钮时，div 淡出 - 完美。 当我单击蓝色的“关于”按钮时，我希望 div 淡入 - 完美。但在淡入时，关闭按钮不会出现。

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

如何让关闭按钮与 div 一起出现和消失？

非常感谢任何帮助。

谢谢！

Answer 1

您的#closebutton 在您的#contentboard 中，因此，当您调用$('#contentboard').html(strAboutUs); 时它会被删除

试试这个：

我没有在$('#contentboard') 上调用.html(...)，而是在$('#contentboard>p') 上调用它，所以它只会替换<p> 内容，而您的#closebutton 不会消失！

var strAboutUs = "<p>Hello World!<br>" +
        "Hello World!<br>" +
        "Hello World!<br>" +
        "Hello World!<br>" +
        "Hello World!</p>";



$('#aboutbutton').on('click', function() {
    if($('#contentboard').css('display') == 'none') {
      $('#contentboard>p').html(strAboutUs); // Changed
      $('#contentboard,#closebutton').fadeIn(1000);
    }
    else {
      $('#contentboard,#closebutton').toggle();
      $('#contentboard>p').html(strAboutUs); // Changed
      $('#contentboard,#closebutton').fadeIn(1000);
    }

  });


$('#closebutton').on('click', function() {
      $('#contentboard').fadeOut(1000);
});

#contentboard {
 width:300px;
 height:auto;
 left:10;
 position:relative;
 background-color:#E0F5FF;
 -webkit-border-radius: 10;
 -moz-border-radius: 10;
 border-radius:10px;
 -webkit-box-shadow: 10px 10px 10px #666666;
 -moz-box-shadow: 10px 10px 10px #666666;
 box-shadow: 10px 10px 10px #666666;
 margin = 25px;
 padding = 25px;
}


.btnblue {
 background: #52baff;
 background-image: -webkit-linear-gradient(top, #52baff, #2980b9);
 background-image: -moz-linear-gradient(top, #52baff, #2980b9);
 background-image: -ms-linear-gradient(top, #52baff, #2980b9);
 background-image: -o-linear-gradient(top, #52baff, #2980b9);
 background-image: linear-gradient(to bottom, #52baff, #2980b9);
 -webkit-border-radius: 10;
 -moz-border-radius: 10;
 border-radius: 10px;
 text-shadow: 1px 3px 3px #000000;
 -webkit-box-shadow: 0px 2px 3px #666666;
 -moz-box-shadow: 0px 2px 3px #666666;
 box-shadow: 0px 2px 3px #666666;
 font-family: Arial;
 color: #ffffff;
 font-size: 24px;
 padding: 25px;
 text-decoration: none;
 margin-top:25px;
 margin-left:25px;
 margin-right:25px;
 width:250px;
}



.btnclose {
 background-color: #E5E5E5;
 color: #000000;
 font-weight: bold;
 position: absolute;
 right:1px;

 -webkit-border-radius:5px;
 -moz-border-radius:5px;
 border-radius:5px;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="aboutbutton" class="btnblue">About</button>

<br><br>


<div id="contentboard">
      <button type="button" id="closebutton" class="btnclose">X</button>

      <p>
        Hello World!<br>
        Hello World!<br>
        Hello World!<br>
        Hello World!
      </p>
    </div>

Answer 2

你可以改变

$('#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*/

这是一种方式……也许有帮助

Answer 3

为了隐藏和显示 div，你只需要使用 fadeIn fadeOut 方法。无需显示任何内容或不必显示 .html 字符串，但如果您确实想在关闭或关于按钮时更改内容，只需在 #contentboard p

中添加 html

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

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