Question

How do I get the below to only fade back in after all of the stuff within the fadeOut has fully loaded and is ready to display? Whats happening is the image on the upper right corner of the textbox is jumping and not fadeing in smoothly the first time you load page which is annoying.

P.s dont ask about the webpage design I just built it lol

http://goodeggsafety.com/dev/

//In-car child safety scotland

        $("#link_1").click(function(e) {

         e.preventDefault();

         var img = $("#childbig2").attr('src');//Get current image

         if(img != 'images/childbig.png'){ //Check if current image is the clicked image if not carry on..
            //Variables
             var imgurl = 'images/childbig.png';
             var flag = 'images/scotland.png';
             var html = 'Visit the Scottish<br /> In-Car child safety<br /> campaign website. <br /><br /> Expert advice on seat and stage selection for your child. <br /><br />';
                 html = html + 'Car seat checking clinics - check<br /> when and where they are in your<br /> area for you to attend and have<br /> your seat checked by a Good Egg<br /> In-Car Expert. <br /><br /> News updates, competitions and much much more.';

             var linkurl = 'http://www.protectchild.co.uk/';//Link url 

              $("#content_1").fadeOut(600, function(){//fade out
                  $("#childbig2").attr('src', imgurl);//change image
                  $("#childbig2").attr('alt', 'In-Car Child Safety');//change image alt tag
                  $("#title_img").attr('src', flag);//change flag
                  $("#title_h2").html('Scotland');//change title
                  $("#text_title").html('In-Car Child Safety'); //Change second title
                  $("#text_content").html(html);//Change main text content
                  $("#weblink").attr('href', linkurl);//Change link url
                  $("#weblink").attr('title', linkurl);//Change link title
                  $("#arrowlink").attr('href', linkurl);//Change link on arrow url
                  $("#arrowlink").attr('title', linkurl);//change link on arrow title    
              }).fadeIn(600);//fade in speed, miliseconds   
          }
        });

Answer 1

You must bind the .fadeIn function of “*content_1*” to .load on the img Node (childbig2):

$("#content_1").fadeOut(600, function(){
  var $content = $(this);
  var $childbig2 = $("#childbig2");

 $childbig2  
    .load(function() {
        $childbig2.off('load');
        $content.fadeIn(600); //fade in speed, miliseconds 
    })
    .attr('src', imgurl)
    .attr('alt', 'In-Car Child Safety') //change image alt tag

  $("#title_img").attr('src', flag);
  $("#title_h2").html('UK');
  $("#text_title").html('In-Car Child Safety'); 
  $("#text_content").html(html);
  $("#weblink").attr('href', linkurl);
  $("#weblink").attr('title', linkurl);
  $("#arrowlink").attr('href', linkurl); 
  $("#arrowlink").attr('title', linkurl);  
}); 

You can use .off brand new feature on jQuery 1.7.x.

Note that binding .load() means: “do XX when image has been loaded”. In this case “do fadeIn() of your parent”.

Also for IExplorer cache compatibility: use first .load() and then .attr()

Remember to unbind (off() function), otherwise it would be queued (called) every time load() function is applied.

Regards