Snorlax Snorlax - 7 months ago 22
HTML Question

fadeIn only if not shown and fadeOut complete

Please Check Edit's as it shows the progress I've made so far


I'm having issues with calling jquery's

fadeOut
complete function. I want the content to
fadeOut
completely before calling the
fadeIn
.
And I also don't want the content to
fadeOut
and
fadeIn
if its respective content is already displayed. For example, if option 1's content is being displayed, and you click on option 1 again, it should not fadeout and back in, it should remain the same.

https://jsfiddle.net/jzhang172/6kpyhpbh/7/



$('.option1').click(function(){
$('.box').children().fadeOut(1000,function(){

$('.one').fadeIn();
});
});
$('.option2').click(function(){
$('.box').children().fadeOut(1000,function(){
$('.two').fadeIn();
});

});
$('.option3').click(function(){
$('.box').children().fadeOut(1000,function(){
$('.three').fadeIn();
});

});

.cheese{
height:200px;
width:300px;
background:blue;
}
.cheese div{
color:white;background:red;
}
.box{
height:300px;
width:500px;


}
.box .content{
display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cheese">
<div class="option1">Option 1</div>
<div class="option2">Option 2</div>
<div class="option3">Option 3</div>
</div>

<div class="box">
<div class="content one">Content One</div>
<div class="content two">Content Two</div>
<div class="content three">Content Three</div>

</div>





EDIT 1: I believe I solved the issue of not fading out properly before it fades in. I used promise() and done, wierd that I need to do that to get it to work... Fiddle here: https://jsfiddle.net/jzhang172/6kpyhpbh/10/

EDIT 2: So, I got both requirements to work, BUT there's an issue...if you click on two options quickly in succession, both show content up, I want only want the latest one to show up. https://jsfiddle.net/jzhang172/6kpyhpbh/16/

Answer

I have used .not(":hidden") function for fadeout functionality so that not every child fades out and hence the display issue.

$('.box').children().not(":hidden").fadeOut(1000,function(){
// code
});

Also you need to show atleast one element at the beginning which I have done for index 0.

$('.box').children().eq(0).show();

Please refer the updated fiddle.

Comments