Home/ Questions/Q 4006430
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-20T08:30:50+00:00

i have these html code: <body> <div id=top> <div id=panels> <div id=yes>yes</div> <div id=no>no</div>

  • 0

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

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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);
})
    • 0