Question

I have a page that uses the jQuery.swfobject plugin to embed 5 flash items into a page and each flash item has a callback using externalInterface. The callbacks work when I have the js function outside of $(document).ready(function() but the jQuery animations do not fire – the ajax load however does.

Does anyone know how to get the animations working too, code below:

function pageLoader(galID) {
$('#menu').hide();
$('#holder_gallery').load("feeds.php", {gallery: galID}, function(){
$('#holder_gallery ul li a').slimbox();
$('#holder_gallery').jScrollPane();
$('.galleryTitle').text(galleryTitle);
$('.galleryTitle').fadeIn(2000);
$('#holder_gallery').fadeIn(2000);

$('.ghost').each(function() {
    $(this).hover(function() {
            $(this).stop().animate({ opacity: 1.0 }, 300);
        },
        function() {
        $(this).stop().animate({ opacity: 0.5 }, 300);
        });
    });});}

The main parts above work well – I just want to add the gloss back in using the fadeIn functions and the animate on hovers. The jScrollpane reinstates itself as does the .load

Regards,

MM

Answer 1

What about binding the .ghost elements in the callback of the #holder_gallery animation

//existing code
$('#holder_gallery').fadeIn(2000, function(){
  $('.ghost', this).each(function() {
    $(this).hover(function() {
      $(this).stop().animate({ opacity: 1.0 }, 300);
     },
      function() {
       $(this).stop().animate({ opacity: 0.5 }, 300);
      });
   });
});