Here I have simple JSFiddle example: /

If you take a look, you will see when you click the "change" button, the red div will fadeOut pletely, and then the blue div will fadeIn. I kind of almost want them to blend, so basically have them fade in and out at the same time, while they still stay on top of each other. Although, if possible, I would prefer the text not to fuse and blend because it will look messy. Maybe the text could fade in after the blend took place?

Here is the HTML:

<button id="change">Change </button>

<div id="box1">
    <p> Hello, this is text1 </p>
</div>

<div id="box2">    
    <p> Goodbye, this is text2 </p>

</div>

Here is the jQuery:

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800, function(){
        $('#box2').fadeIn(800);
    });

});

How would I achieve this?

Here I have simple JSFiddle example: http://jsfiddle/LKwmW/

If you take a look, you will see when you click the "change" button, the red div will fadeOut pletely, and then the blue div will fadeIn. I kind of almost want them to blend, so basically have them fade in and out at the same time, while they still stay on top of each other. Although, if possible, I would prefer the text not to fuse and blend because it will look messy. Maybe the text could fade in after the blend took place?

Here is the HTML:

<button id="change">Change </button>

<div id="box1">
    <p> Hello, this is text1 </p>
</div>

<div id="box2">    
    <p> Goodbye, this is text2 </p>

</div>

Here is the jQuery:

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800, function(){
        $('#box2').fadeIn(800);
    });

});

How would I achieve this?

• javascript
• jquery
• html
• function
• fade

Share Improve this question Follow asked May 25, 2013 at 16:52 Bradley MitchellBradley Mitchell 28722 gold badges55 silver badges1414 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Just remove the callback, and position the elements on top of each other :

$('#box2').hide()

$('#change').click(function(){
    $('#box1').fadeOut(800);
    $('#box2').fadeIn(800);
});

FIDDLE

The text is inside the elements, and it fades with the elements, to avoid that you have to either move the text out of the elements or use CSS transitions to animate just the background colors.

Adeneo's answer just works fine if you know the size of the divs which are to be toggled. Here a solution when you do not know the height and the children heights can be different from each other but you still want the parent to use the height of the larger child.

This allows paring two divs for differences without making everything below the paring divs "jump" when you toggle contents. Main ideas: Use a grid for positioning and use opacity for making the foreground div invisible.

jQuery.fn.visible = function(duration) {
    this.animate({opacity: 1.0}, duration);
};

jQuery.fn.invisible = function(duration) {
    return this.animate({opacity: 0}, duration);
};

var b = false;
$('#change').click(function(){
    if(b){
    $('.child2').visible(1000);
  } else {
    $('.child2').invisible(1000);
  }
  b = !b;
});

.parent {
    display: grid;
    grid-template-columns: 1fr;
    border: 1px solid black;
}
.child1 {
    grid-row-start: 1;
    grid-column-start: 1;
    background-color: yellow;
}
.child2 {
    grid-row-start: 1;
    grid-column-start: 1;
    background-color: pink;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="change">Toggle child 1</button>

<div class="parent">
    <div class="child1">child 1</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent">
    <div class="child1">child 1<br/>very long content</div>
    <div class="child2">child 2</div>
</div>
<br/>
<div class="parent">
    <div class="child1">child 1</div>
    <div class="child2">child 2<br/>very long content</div>
</div>

You can also achieve the effect using animate without having multiple div

Try something like this

$('#box2').hide()

$('#change').click(function(){
   $("#box1").animate({
       backgroundColor:"blue"
  }, 1500 );
});

JS Fiddle Demo