Как fadein и fadeout 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); 
}); 

Вот что я пытаюсь сделать:

По умолчанию, divboard contentboard виден с некоторым продолжением ent и div содержит близкую кнопку. Когда я нажимаю кнопку с близкого расстояния, div исчезает - отлично. Когда я нажимаю синюю кнопку «about», я хочу, чтобы div исчезал - идеально. Но после fadein кнопка закрытия не появляется.

Я не понимаю, почему это происходит. Я попробовал использовать несколько селекторов, чтобы div и близкая кнопка могли исчезать вместе, но это тоже не сработало.

Как заставить близкую кнопку появляться и исчезать с помощью div?

Любая помощь глубоко оценена.

Спасибо!

Answer 1

Ваш #closebutton находится внутри вашего #contentboard, таким образом, стирается при вызове $('#contentboard').html(strAboutUs);

Попробуйте вместо этого:

Вместо вызова .html(...) на $('#contentboard') я назвал его $('#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 все, что есть методы FADEOUT FadeIn. Нет необходимости для отображения ни или необходимости .html строки, но если вы хотите изменить содержание при ближайшем или кнопке о просто HTML внутри #contentboard р

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

это способ ... может быть, это помогает