Question

I’m trying to put together a microsite which uses Jquery for a number of animations. There are 4 links on the page which each open up a lightbox.

I want the lightbox to appear using a ‘show’ function after the background darkens – at the moment this is working fine. However when the lightbox is closed I’d like it to hide before the dark background fades out. For some reason, when the ‘hide’ function is executed, the lightbox panel extends to the bottom of the page before shrinking, and the background fades simultaneously, rather than waiting until the hide function is complete (despite the fadeout having been written into the callback of the hide)

I’m new to Jquery so I know I’ve got it wrong somewhere, but if someone could help I’d be most grateful.

The Jquery code for one of the lightbox panels is written below. To see the microsite as it stands at the moment and to view the HTML source, go to:

http://testing.xenongroupadmin.com/whatis/pfi

So far I’ve only written the code for one of the lightboxes – click on the top left box entitled ‘Who needs to know’.

Any help would be most appreciated!

Thanks!

JQuery Code

$(document).ready(function(){

$("a#show-whopanel").click(function(){
 $("#lightbox, #who-panel").fadeIn(300, function(){
  $("div#animation1").show(600);
  })
 })

$("a#close-panel").click(function(){
 $("div#animation1").hide(600, function(){
  $("#lightbox, #who-panel").fadeOut(300);
  }
 );
})

})

Answer 1

At a more general level, when debugging jQuery, it pays to remove the callback function and see whether the basic effect is working.

So, your closure is as follows:

$("a#close-panel").click(function(){
   $("div#animation1").hide(600, function(){
       $("#lightbox, #who-panel").fadeOut(300);
   });
});

It basically says: on click, (1) hide animation1, and when the hide has finished, (2) fadeout lightbox and who-panel.

To debug, you want to check what this does:

$("a#close-panel").click(function(){
   $("div#animation1").hide(600);
});

And then check what this does:

$("a#close-panel").click(function(){
       $("#lightbox, #who-panel").fadeOut(300);
});

Then you’ll know what’s doing what, and which effect is making the div increase in size before it disappears.

You’re also missing some semi-colons, although that should be OK.

EDIT:
Looking more closely, why are you using a callback at all? Don’t you just want to get rid of the lightbox and who-panel? Why are you hiding animation1? If the who-panel is faded out, you won’t be able to see animation1 anyway!