stopping a series of timeouts when hover/mouseenter or even returning false

Question

I know that this topic has been talked about but none of the solutions provided in any of them worked or I did not apply them correctly and this is taking way longer than it should.

I am trying to loop through my array when my mouse is not over a specified area. I can get the loop to start, but not stop.

Thank you for the help in advance.

<script type="text/javascript">
jQuery(document).ready(function($){
    var myArray = new Array( "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15" );
    var firstNumber, incrementDelay = 5000, newIncrementValue = 1, timers = new Array();

    function loadCurrentArrayNumber(first){

        $('.image').eq(first).each(function(){
            if($('.projects_holder_outer').is(":hover")){return false; }
            var $this = $(this);

            var bottom = $this.find('img').height();
            $this.find('.image_hover').css('bottom', -bottom);

            var top = $this.find('span.text_inner').height();
            $this.find('.text_holder').css('top', -top-10);

            $this.find('.text_holder').css('visibility', 'visible');
            $this.find('.image_hover').css('visibility', 'visible');

            $this.mouseenter(function(){
                //clear existing
                $('.image_hover').stop().animate({'bottom': '-188px'}, 200);
                $('span.text_holder').stop().animate({'top': '-67px'}, 100);
                //show new one
                $this.find('.image_hover').stop().animate({'bottom': '0px'}, 200, function(){
                    $this.find('span.text_holder').stop().animate({'top': bottom/2-top/2}, 300);
                }); 
            })
            // add a timer to the array
            /*timers.push(setTimeout(function() {
                $this.trigger('mouseenter');
            }, 1000*newIncrementValue));
            newIncrementValue++;*/

            $this.delay(1000*newIncrementValue).queue(function(){ 
                //clear existing
                $('.image_hover').stop().animate({'bottom': '-188px'}, 200);
                $('span.text_holder').stop().animate({'top': '-67px'}, 100);
              $(this).trigger('mouseenter'); 
              $(this).dequeue(); 
            });
            newIncrementValue++;

        });

    }

    $('.projects_holder_outer').mouseleave(function() {
        //$('.image_hover').stop().animate({'bottom': '-188px'}, 200);
        //$('span.text_holder').stop().animate({'top': '-67px'}, 100);
    }, function() {
        newIncrementValue = 1;
        for ( var i = 0; i < myArray.length; ++i) {
            loadCurrentArrayNumber(myArray[ i ]);
        }
    })
});

Answer 1

I found the link here and this is what I ended up coming up with. It works as expected.

<script type="text/javascript">
jQuery(document).ready(function($){
    var firstNumber=15, timeOut, pause=false;
    function loadCurrentArrayNumber(){
        if (pause) { return false; } // if hovered : stop 'timeOut'
        clearTimeout(timeOut);

        // add a timer to the array
        timeOut = setTimeout(function() {
            ++firstNumber;
            if(firstNumber > 14){firstNumber=0;}


            $('.image').eq(firstNumber).each(function(){
                var $this = $(this);

                var bottom = $this.find('img').height();
                $this.find('.image_hover').css('bottom', -bottom);

                var top = $this.find('span.text_inner').height();
                $this.find('.text_holder').css('top', -top-10);

                $this.find('.text_holder').css('visibility', 'visible');
                $this.find('.image_hover').css('visibility', 'visible');

                $this.mouseenter(function(){
                    //clear existing
                    $('.image_hover').stop().animate({'bottom': '-188px'}, 200);
                    $('span.text_holder').stop().animate({'top': '-67px'}, 100);
                    //show new one
                    $this.find('.image_hover').stop().animate({'bottom': '0px'}, 200, function(){
                        $this.find('span.text_holder').stop().animate({'top': bottom/2-top/2}, 300);
                    }); 
                })
                // trigger the mouse function
                $this.trigger('mouseenter');
                $('.projects_holder_outer').trigger('mouseleave');
            });
        }, 2000);


    }
    loadCurrentArrayNumber();

    $('.projects_holder_outer').hover(function() {
        pause = true;
        clearTimeout(timeOut);
    }, function() {
        pause = false;
        loadCurrentArrayNumber();
    })


});