1

Lets say I have 2 divs, one is hidden, the other is showing. When a button is clicked, I want to use the jQuery fade effect to fade out one div and fade in the hidden div.

So -

<div id="part1">Hello</div>
<div id="part2" style="display: none">Hello2!</div>
<button id="btn1">Click here!</button>

and the JS -

$("#btn1").on("click", function(){
    $("#part1").fadeToggle();
    $("#part2").fadeToggle();
});

Now, this works, but as you can imagine what happens is that it first hides the 1st div, then shows the second div, and then immediately takes the second div up to the place where the previous div was located.

What can I do about this? I want them to stay in the same position (something like they have here http://kenwheeler.github.io/slick/ in their fade demo.)

Thanks!

thomas
  • 1,133
  • 1
  • 12
  • 31
  • Have you tried something like this? http://stackoverflow.com/questions/5879899/how-to-fade-out-div-slowly-update-content-and-then-fade-in-div-slowly-using-j – Henry May 16 '14 at 21:55

6 Answers6

5

You can do it with jQuery. Fade out the first div and fade in the second one in the callback. Like this: http://jsfiddle.net/D2Cw9/

$(".one").fadeOut(500, function() {
    $(".two").fadeIn(500, function() {
    });
});
jarbaugh
  • 503
  • 5
  • 10
4

One solution would be using absolute positioning on both divs relative to their container.

#parts-container {
    position: relative;
}

#part1, #part2 {
    position: absolute;
    left: 0;
    top: 0;
}
  • This is the best answer. It allows you to use any element not just divs with a change in text. Used to hide two buttons and show two different ones in a materialize modal. – Marios Jul 31 '19 at 00:43
2

Use css position absolute to set them to the same position.

Streamside
  • 332
  • 1
  • 8
2

At the time of writing, you have 4 answers that all seem to be correct solutions using CSS positioning. I noticed you have jQuery as a tag, so I thought I'd offer up a different solution.

Have you thought about not actually hiding the div, and replacing it with the other? For example, you could change the CSS class of the div with jQuery:

$('#part1').fadeOut(300, function() {
    $('#part1').addClass('part2');
    $('#part1').innerHTML('Hello2!');
    $('#part1').fadeIn(300, function(){});
});

Of course you should use a synchronous fade to make sure the class change happens while the div is hidden.

Justin C
  • 333
  • 1
  • 7
2

It seems that a lot of people answered this question correctly. I would like to add that you can also keep the div and just set the css opacity to 0 using the jQuery UI color animation.

I believe this is yet another option.

Gabriel Ferraz
  • 592
  • 6
  • 26
1

Try adding position absolute to both of them and wrapping them in a relative div

DeadlyChambers
  • 5,217
  • 4
  • 44
  • 61