2

I have a function that serves as a slideshow; the images change at the correct intervals, but do not have a fade animation:

function changePic() {
    if (n == pics.length) {
        pics = shuffleArray(pics);
        n = 0;
    }
    var pic = "media/" + pics[n];
    if (pic === "media/dave.png") {
        dave();
    }
    $("#dinner").fadeOut("slow",function(){
        $("#dinner").attr("src",pic);
        $("#dinner").fadeIn("slow",function(){
            setTimeout(changePic,slideDuration);
        });
    });
    n++;
}
Halpo
  • 2,555
  • 2
  • 20
  • 48
  • 2
    Are any errors shown in the developer console? Can you share a working example on jsFiddle? – ComFreek May 02 '14 at 14:35
  • 2
    If you're updating the image `src`, you might need to [wait for it to load](http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached) before fading it in. – Blazemonger May 02 '14 at 14:37
  • here's the live site (complete with bugs) http://ukdinner.com – Halpo May 02 '14 at 14:43
  • This still happens when all the images are local – Halpo May 02 '14 at 14:56

3 Answers3

2

I had a problem with fadeOut in both Chrome and IE10, but not Firefox 30. The issue is apparently down to float:left - I removed that and the problem went away. Not ideal, but according to the jQuery bug tracker, it's too low priority to fix.

http://bugs.jquery.com/ticket/7978

Savage
  • 2,015
  • 1
  • 26
  • 33
0

FadeIn() and FadeOut() functions of Jquery does not support the basic version of Google Chrome(Version : 34). So, Please try updated version or try show() and hide(). It works good for me..

Gopinath
  • 69
  • 1
  • 3
-1

try this :

instead of .fadeIn() and .fadeOut() try using .show() and .hide() that works good. Use this if animated effect is not important.

murtaza.webdev
  • 3,083
  • 4
  • 19
  • 31