Question

here is the code: http://jsfiddle.net/VW8V5/1/

When hover it should start looping but end of the loop somehow it shows only img3 and img4 (looping img3 to img4), it should start from the beginning. When hover out it should stop at img1.

Answer 1

This will cycle through all four images. I’m not sure what you were trying to accomplish when you stop hovering other that to stop the cycle of the images.

/* FOR PEOPLE LIST ITEMS */
$(".box a").hover(
    function () {
        var self = $(this);
        self.data("hover", true);
        function flip() {
            var top = self.closest(".box");
            var next = top.find(".current").next("img");
            if (!next.length) {
                next = top.find("img:first");
            }
            top.find("img").hide().removeClass("current");
            next.addClass("current").show().flip({
                direction:'tb',
                speed: 200,
                onEnd: function(){
                    if (self.data("hover")) {
                        setTimeout(flip,500);
                    } else {
                        top.find(".hidden").fadeOut("slow");
                        top.find(".active").fadeIn("slow");
                    }
                }
            })
        }
        flip();

    }, 
    function () {
        $(this).data("hover", false);
    }
);

Working demo here: http://jsfiddle.net/jfriend00/hQnXm/