Question

here is the function: http://jsfiddle.net/bfQMD/25/

How can I flip continuously when hover and stops when hover out?

Answer 1

You can do it like this:

$(document).ready(function () {

    $("a").hover(
        function () {
            var self = $(this);
            self.data("hover", true);

            function flip() {
                $(".flipbox").flip({
                    direction:'tb',
                    color: '#fff',
                    onEnd: function(){
                        if (self.data("hover")) {
                            setTimeout(flip,500);
                        }
                    }
                })
            }

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

});

Working demo here: http://jsfiddle.net/jfriend00/2BALx/

In the two hover functions, you keep track of whether the mouse is currently hovering and then in the onEnd function for each flip, if the mouse is still hovering, you start a new flip() after a short delay. Due to the way the flip plug-in works, you have to use a short delay (it can be super short if you want) because if you try to start the next clip from onEnd directly, it won’t start – thus it needs to be on at least a very short timer.