javascript - Hiding a <div> and showing a new one in the same spot? - Stack Overflow

admin管理员组

文章数量:1245980

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 / in their fade demo.)

Thanks!

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!

• javascript
• jquery
• html
• css

Share Improve this question Follow asked May 16, 2014 at 21:49 thomasthomas 1,17422 gold badges1414 silver badges3131 bronze badges 1

• Have you tried something like this? stackoverflow./questions/5879899/… – Henry Commented May 16, 2014 at 21:55

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 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/D2Cw9/

$(".one").fadeOut(500, function() {
    $(".two").fadeIn(500, function() {
    });
});

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;
}

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

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.

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.

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

本文标签： javascriptHiding a ltdivgt and showing a new one in the same spotStack Overflow