I get different results in Safari and Firefox with this function

I get different results in Safari and Firefox with this function

Hi there,

i wrote a little function that should exchange one of two images and blend them over afterwards.

the functions checks which one of the 2 images is visible right now and loads the new image
(if its new) into the other one. Everything is working as intended in Firefox, but Safari has problems with the code and does not always load the new image.

Can someone please have a look at my code and tell me if there's something wrong with it?

the script:

  1. function bgChange(newSrc){
    if($("#body-background1").is(':visible')==true && $('#theBackground1').attr('src') != newSrc){
    $('#theBackground2').attr('src', ''+newSrc).load(function(){
     
    $('#body-background1').animate({ opacity: 'hide' }, 'slow');
    $('#body-background2').animate({ opacity: 'show' }, 'slow');
    $(window).unbind("resize", function(){
        $("#body-background1").ezBgResize(); 
    });
    $(window).bind("resize", function(){
        $("#body-background2").ezBgResize();
    });
    });
    }
    else if($("#body-background2").is(':visible')==true && $('#theBackground2').attr('src') != newSrc){
    $('#theBackground1').attr('src', ''+newSrc).load(function(){
     
    $('#body-background2').animate({ opacity: 'hide' }, 'slow');
    $('#body-background1').animate({ opacity: 'show' }, 'slow');
    $(window).unbind("resize", function(){
        $("#body-background2").ezBgResize(); 
    });
    $(window).bind("resize", function(){
        $("#body-background1").ezBgResize();
    });
    });

    }


    }




...the corresponding html is the following:
  1. <div id="body-background1"><img id="theBackground1" src="standards/bg_standard.jpg" alt="Bg"></div>
    <div id="body-background2"><img id="theBackground2" src="standards/bg_standard.jpg" alt="Bg"></div>


...any help is much appreciated :-))

all the best
Stefan