остановка серии таймаутов при наведении курсора / мыши или даже возврате false

0

Я знаю, что эта тема обсуждалась, но ни одно из решений, предоставляемых ни в одном из них, не работало, или я не применял их правильно, и это занимает больше времени, чем нужно.

Я пытаюсь пропустить свой массив, когда моя мышь не находится над определенной областью. Я могу запустить цикл, но не останавливаться.

Благодарим вас за помощь заранее.

<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 ]);
        }
    })
});

  • 1
    Не могли бы вы поддержать и описать то, что вы на самом деле пытаетесь выполнить, потому что то, что у вас есть, пока выглядит очень сложным, и я уверен, что есть гораздо более простой способ, если бы мы знали, что вы пытаетесь сделать.
  • 0
    jfriend00, спасибо за быстрый ответ. У меня есть коробка с серией изображений. Когда пользователь наводит курсор на изображение, вместо изображения появляется что-то, а при наведении курсора изображение снова появляется. Это все работает просто отлично. Затем у меня есть массив, который генерируется из объектов в коробке. Когда пользователь перемещает туда мышь с большого блока (с меньшими изображениями), я хочу, чтобы он начал циклически перемещаться по массиву, как если бы кто-то двигал туда мышью по каждому изображению. Я могу заставить это работать, но я не могу остановить это. Он должен остановиться, когда мышь вернется к любому из небольших изображений.
Теги:
onmouseover

1 ответ

0
Лучший ответ

Я нашел ссылку здесь, и вот что я в итоге придумал. Он работает так, как ожидалось.

<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();
    })


});

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню