如何使用关闭按钮淡入和淡出 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 淡出 - 完美。当我单击蓝色 "about" 按钮时，我希望 div 淡入 - 完美。但是fadein后，关闭按钮没有出现

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

如何让关闭按钮随着 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

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

中 html

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

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

Answer 3

你可以改变

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

这是一种方式...也许它有帮助

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

How to fadein and fadeout a Div with a close button?

html

jquery

toggle

fadeout

fadein