Question

I am trying to implement a metro style slide UI using jquery in which slides are displayed one after another in a cyclic manner, here is the code link:

http://jsfiddle.net/cgTqV/9/

The problem is after one round of displaying slides, the slides transition no more works correctly. Its very fast and doesn’t work exactly as it works in first run. I am not able to find the bug. Please, find the bug and tell me what went wrong.

Your browser may crash after 1st complete transition, use alert(“foo”); to prevent it.

Answer 1

As Marco suggested replace the code snippet… the one given below

setInterval(function() {........  }, tiledelay);

with this

        interval = window.clearInterval(interval);   //only these two lines are the important ones
        interval = window.setInterval(function() {   //and this
            if (count <= (items.length - 1)) {       //below this is the same old code...
                count++; //Increment count
                previouscount = count - 1; //Set previous
                showtile();
            }
            if (count == items.length - 1) {
                count = 0;
                for (var i = 0; i < items.length; i++) {
                    $(items[i]).animate({
                        top: "200px"
                    }, tilespeed);
                }
                showtile();
            }
        }, tiledelay);

and after

var previouscount=-1;//Count to check prvious <li> element/tile

add this

var interval;

I just added code to re-initiate the timer in every call.

Please tell me is this helps or not….maybe you are looking for something else..