Fadeout elements hide elements which fadein

Question

i have these html code:

  <body>
    <div id="top">
      <div id="panels">
         <div id="yes">yes</div>
         <div id="no">no</div>
      </div>
    </div>
  </body>

I using jQuery (i`m not a specialist) to fadeout old elements and by ajax adding new (ajax code is not ready now)..so the code:

$(document).ready(function(){
jQuery('#yes').click(function(){
    $('#panels').fadeOut(1000);
    var fun = $('<div>ITS OVER</div>');
    $(fun).hide().appendTo('#panels').fadeIn(1500);
});
});

but it works like: i click on the button (#yes) it start to fadeout old elements during this process it fadein new, and when fadeout finish both elements is not displaied, what is the problem? P.S. Sorry for my English

Josiah Ruddell Josiah Ruddell · Accepted Answer · 2011-02-25T22:01:23

You are appending it to a hidden container $('#panels').fadeOut(1000);.

You could just hide the children $('#panels').children().fadeOut(1000) instead of the whole container.

Since your new content would ideally load into the container. I am emptying out panels, and adding the dynamic content.

$('#panels').fadeOut(1000, function(){
    $(this)
        .html('<div>ITS OVER</div>')
        .fadeIn(1500);
})

Fadeout elements hide elements which fadein

1 Answers