How to add fadeIn() method for each object in an array

Question

I have an Iframe whose source changes every 5 seconds:

 $(window).load(function() { if (typeof $('.frame') != 'undefined' || null) { $(".frame").ready(function() { var locations = ['http://www.webstarts.com/support/2011/03/how-to-add-an-iframe-to-your-webstarts-website/', 'http://www.wix.com/app-market/html-iframe-embed/overview', 'http://codepen.io/jmelgoza/pen/jEaGYg', 'http://www.oddee.com/item_96986.aspx', 'http://www.imdb.com/title/tt2488496/', 'http://www.w3schools.com/tags/tag_iframe.asp' ]; var len = locations.length; var iframe = $('.frame'); var i = 0; setInterval(function() { iframe.attr('src', locations[++i % len]); }, 5000); }); } }); 

I would like to have it so that every time the source changes there is a fadeIn/fadeOut effect. How would I go about doing this? Currently the source is switching but it kind of pops in and out between the sources abruptly. I would like to have a more elegant transition between the sources when they switch. Any help would be great. Thanks.

Answer 1

Try this:

setInterval(function() {
    iframe.attr('src', locations[++i % len]);
    iframe.fadeOut(300, function() {
        iframe.fadeIn(300);
    });
}, 5000);

Answer 2

I ended up using something like this:

  setInterval(function () { iframe.attr('src', locations[++i % len]); iframe.fadeOut(300, function () { iframe.fadeIn(300); }); 

and replaced the current interval function. I would have also 'up voted' whoever recommended this to me but I no longer see their post. Also if there are anymore recommendations as to how I should improve this code (even though it seems to be working) I am listening. I am sure it can be better.

Answer 3

I can update this answer as more issues with the code become relevant, but the first thing that stands out is this line:

if (typeof $('.frame') != 'undefined' || null) {

I think what you're looking for here is this for your defensive programming technique:

if ($('.frame') != null && $('.frame').length > 0) {