JQuery проверить состояние наведения перед запуском запуска - PullRequest
Новая
       4

JQuery проверить состояние наведения перед запуском запуска

6 голосов
/ 17 мая 2011

Я создаю небольшой плагин слайдера с помощью jquery. изображения будут скользить на 5% слева или справа, когда мышь находится над левым или правым контрольным делителем. При нажатии изображение сдвигается до 100%

проблема заключается в том, что при перемещении мыши во время полного слайда в анимации от элемента управления слева направо я могу проверить, всегда ли мышь находится над левым элементом, чтобы снова вызвать событие наведения мыши. В результате изображение слева и справа показывают 5%.

Есть ли способ проверить наведение мыши, как этот? 

if($(this).mouseover())
$(".right").trigger("mouseover");

код контроллера div выглядит следующим образом 

        $(".right",this).bind({
            mouseover:function(){
                if( vars.current == $("img").length-1 || vars.running) return false;
                $("img:eq("+(vars.current+1)+")").removeAttr("style").css({position:"absolute",left:"100%","z-index":vars.current+1}).show().animate({left:"95%"}, {queue: false})
            },
            mouseleave:function(){
                if( vars.current == $("img").length-1 || vars.running) return false;
                $("img:eq("+(vars.current+1)+")").animate({left:"100%"}, {queue: false , complete:function(){ $(this).hide() } });
            },
            click:function(){
                if( vars.current == $("img").length-1 || vars.running) return false;
                vars.running = true;
                $("img:eq("+(vars.current+1)+")").animate({left:"0%"}, {queue: false, complete:function(){ 
                    $("img:eq("+vars.current+")").hide(); 
                    $(this).css({"z-index":0})
                    vars.current++;
                    vars.running = false;
                    if($(this).mouseover())
                    $(".right").trigger("mouseover");
                } } );
            }
        })

Я использую способ из другого ответа ... но его исключение .... 

mouseover:function(){
                isOver = 'right';
                if( vars.current == $("img").length-1 || vars.running) return false;
                $("img:eq("+(vars.current+1)+")").removeAttr("style").css({position:"absolute",left:"100%","z-index":vars.current+1}).show().animate({left:"95%"}, {queue: false})
            },
            mouseleave:function(){
                isOver = false
                if( vars.current == $("img").length-1 || vars.running) return false;
                $("img:eq("+(vars.current+1)+")").animate({left:"100%"}, {queue: false , complete:function(){ $(this).hide() } });
            },
            click:function(){
                if( vars.current == $("img").length-1 || vars.running) return false;
                vars.running = true;
                $("img:eq("+(vars.current+1)+")").animate({left:"0%"}, {queue: false, complete:function(){ 
                    $("img:eq("+vars.current+")").hide(); 
                    $(this).css({"z-index":0})
                    vars.current++;
                    vars.running = false;
                    if(isOver)
                    $("."+isOver).trigger("mouseover");
                } } );
            }

с помощью переменной isOver я могу вызвать левую или правую

Ответы [ 2 ]

32 голосов
/ 17 мая 2011

Чтобы проверить, находится ли что-то в движении, вы можете использовать: hover selector, например ::

$('#test').click(function() {
    if ($('#hello').is(':hover')) {
        alert('hello');
    }
});

Пример здесь: http://jsfiddle.net/AyAZx/5/

19 голосов
/ 11 мая 2013

Actionshrimp ответ не работает с JQuery 1.9.1.

Используйте вместо 

$("#idOfYourElement:hover").length > 0

в вашем условии if

http://jsfiddle.net/mathheadinclouds/ZKGqe/

...