Question

I have a link which contains several images. Upon hovering an interval is set and css class is added, and iterated over the images. Upon mouse out the interval is cleared. Code below:

jQuery('#flicker').hover(
    function() {
       flicker = setInterval(function() {
           if (jQuery('#flicker img.active').next('img').length > 0) {
               jQuery('#flicker img.active').removeClass('active').next('img').addClass('active');
           } else {
               jQuery('#flicker img').removeClass('active');
               jQuery('#flicker img:first-child').addClass('active');
           } 
       }, 200);
     }, 
     function() {
       clearInterval(flicker);
     }
 ); 

For some reason on Internet Explorer 6,7,8 the link href changes on hover, to a string of numbers.

For a test case see here. Any help greatly appreciated, I’ve not seen this bug before!

Thanks.

( Also let me know if you can’t replicate, I’m testing on a Mac using Parallels. )

Answer 1

It’s because you called the variable in which you store the interval timer flicker, which is also the id of your element, and you haven’t declared the variable and so you fall prey to the Horror of Implicit Globals. On IE (and some other browsers) id values end up being properties on the window object (the value being the Element), so you’re ending up assigning a number to the element, which on IE sets its “default” property, which is href.

Just create a private context and declare your flicker variable:

(function() {
    var flicker = 0;

    jQuery('#flicker').hover(
        function() {
           flicker = setInterval(function() {
               if (jQuery('#flicker img.active').next('img').length > 0) {
                   jQuery('#flicker img.active').removeClass('active').next('img').addClass('active');
                   } else {
                   jQuery('#flicker img').removeClass('active');
                   jQuery('#flicker img:first-child').addClass('active');
               } 
           }, 200);
         }, 
         function() {
           clearInterval(flicker);
         }
     ); 
})();

---

Off-topic: Some other changes I’d recommend:

• Every time you call the jQuery function, a fair bit of work has to be done, so calling it repeatedly for the same selector when the document hasn’t changed is fairly inefficient. It’s one of those patterns that should raise a red flag in your mind when you see it. Recommend updating the hover code to store and reuse the result. (Mind you, it runs just fine on IE7 which isn’t exactly a fast browser, so…)
• Recommend clearing the flicker variable when you clear the timer. 0 is a good value, because 0 is not a valid timer handle. (That’s why I used it as the initial value above.) Just in case something weird happens with the browser calling your functions.