0

Basically, I want the iframe to fade out, then load a new url, then fade back in. Right now my code just fades out and (presumably, I can't really see it) loads the new page. I'm using $('iframe').ready(function(){ /*code that changes the src of the iframe*/ });

jemtan990
  • 443
  • 1
  • 6
  • 22
  • http://stackoverflow.com/questions/2429045/iframe-src-change-event-detection http://stackoverflow.com/questions/6765356/dynamically-change-onload-for-an-iframe – kirelagin May 26 '13 at 20:25
  • I guess I don't understand how to call $(iframe).animate() again from inside the iframe. Both of these seem to use onload functions, but how could I access the opacity of the iframe from the page that is inside the iframe? Maybe I'm just confusing myself. – jemtan990 May 26 '13 at 20:29
  • You don't have to do anything from inside the iframe. You'll place all your code on the main page. – kirelagin May 26 '13 at 20:32

2 Answers2

1

Something like this?

Example: http://jsfiddle.net/EcRBv/1/

function changeIframe(newSrc){
    $("#iframe1").fadeOut('fast',function(){
        $(this).attr("src",newSrc);
        $(this).load(function(){
            $(this).fadeIn("fast"); 
        });
    });
}

changeIframe("http://www.jsfiddle.net");
Nile
  • 1,586
  • 1
  • 14
  • 25
  • It's probably wiser to attach the handler _before_ changing `src` just in case the event somehow manages to fire before your next line was executed. – kirelagin May 26 '13 at 20:34
  • Yes!!! Thank you so much! I just needed to change .ready() to .load(), I don't know how I missed that. – jemtan990 May 26 '13 at 20:35
-1

Either use .load() or change the iframe .attr('src'), like this.

$(document).ready(function(){
  $('iframe').animate({opacity:0}, 300, function(){
    //load or change source inside this callback     
  })
  $('iframe').animate({opacity:1}, 300};
})
Casey Dwayne
  • 2,142
  • 1
  • 17
  • 32