setInterval not working properly with chrome

Question

I've made an image fader using 2 <div>s (one is an image and the other is a ul containing several images) the script is working perfectly on firefox and Safari but not working properly on Chrome, it just does the first fade and then it stops the script is this

$("#second").css({
    opacity: 0.0
});

$(function () {
    setInterval("rotateImages()", 4000);
});

function rotateImages() {

    if ($("#first").css("opacity") == 1) {
        $("#first").animate({
            opacity: 0.0
        }, 1500);
        $("#second").animate({
            opacity: 1.0
        }, 1500);
    } else {
        $("#second").animate({
            opacity: 0.0
        }, 1500);
        $("#first").animate({
            opacity: 1.0
        }, 1500);
    };

};

I don't know where exactly the problem is and how to make the script work on all browsers. any help would be much appreciated

Thanks

NITPICK: do not keep using `$("#XXXX")` over and over again, store it into a variable and use that so you are not constantly doing DOM look ups to get the element you already found once. — epascarello, Aug 12 '13 at 12:54
@user2674916 It is really hard without your interaction. Come up and place your comments. if resolved, place the reason or share the errors. — Praveen, Aug 12 '13 at 13:00
I tried all suggestions and it's still the same, works fine with all browsers except Chrome. — Yamen, Aug 12 '13 at 14:01
possible duplicate of [fade in/out between two divs on a loop](http://stackoverflow.com/questions/14589842/fade-in-out-between-two-divs-on-a-loop) — mplungjan, Dec 10 '13 at 09:43

score 2 · Answer 1 · edited May 23 '17 at 12:26

2

This works for me

Live Demo

$(function() {
  $("#second").css({
    opacity: 0.0
  });
  setInterval(rotateImages, 4000);    
});
function rotateImages() {
    if ($("#first").css("opacity") == 1) {
        $("#first").animate({
            opacity: 0.0
        }, 1500);
        $("#second").animate({
            opacity: 1.0
        }, 1500);
    } else {
        $("#second").animate({
            opacity: 0.0
        }, 1500);
        $("#first").animate({
            opacity: 1.0
        }, 1500);
    };

};

However it can be MUCH simpler.

For example this almost works, but this one is better

$(function() {
  var $first = $("#first");
  var $second  = $("#second");
  $("#second").hide();

  var tId = setInterval(function() {
      $first.fadeToggle("slow",function() {
        $second.fadeToggle("slow");
      })    
  },4000);          
});

edited May 23 '17 at 12:26

Community

1
1

answered Aug 12 '13 at 12:53

mplungjan

169,008
28
173
236

Except it needed to be wrapped in $(function() {} – mplungjan Aug 12 '13 at 13:04
Not if the code is after the element and that would NOT effect the looping from running since it is not checking for zero on the second element. – epascarello Aug 12 '13 at 13:11
@mplungjan Do we need to assign it to a variable var `tId =` ? – Praveen Aug 12 '13 at 13:12
I never assume the code is after the element when people complain something does not work here at SO – mplungjan Aug 12 '13 at 13:17
@mplungjan killing it using clearInterval. I didn't realized it. Nice one. But without OP's interaction it is really hard to get it. – Praveen Aug 12 '13 at 13:32
thanks a lot, what you've suggested with fadeToggle works but it's a bit jittery – Yamen Aug 12 '13 at 13:59
@Shikiryu - it is very unlikely the user will return. 1 point since August 2012 so not active at all at SO. We can hope, he was last seen in September – mplungjan Dec 10 '13 at 09:33
@mplungjan the point is to give him a notification, so maybe (s)he'll see my message! – Shikiryu Dec 10 '13 at 09:39

score -1 · Answer 2 · edited Aug 12 '13 at 12:47

-1

Remove () and quotes

   setInterval(rotateImage, 4000);

edited Aug 12 '13 at 12:47

mplungjan

169,008
28
173
236

answered Aug 12 '13 at 12:46

Praveen

55,303
33
133
164

1

However that is not the reason – mplungjan Aug 12 '13 at 12:47
@mplungjan Thanks for the edit. I thought it was a syntax error. watching closing to figure it out. – Praveen Aug 12 '13 at 12:53
1

No that is wrong, http://jsfiddle.net/AEjda/5/ check this it is working. Better make your fiddle here and share the link – Praveen Aug 12 '13 at 13:05

score -2 · Answer 3 · answered Aug 12 '13 at 12:47

-2

$(function(){
    setInterval("rotateImages()", 4000);
});

change to

setInterval(function(rotateImages()), 4000);

answered Aug 12 '13 at 12:47

Farhad

742
6
22

1

same as setInterval(rotateImages, 4000); and will alas not solve it anyway – mplungjan Aug 12 '13 at 12:47

setInterval not working properly with chrome

3 Answers3