jQuery在开始触发之前检查悬停状态 [英] jQuery check hover status before start trigger

问题描述

i create a small slider plugin with jquery. the images would slide 5% in from left or right when the mouse is over the left or right controll div. On click the image slides in to 100%

the problem is that when move the mouse during the full slide in animation from the left to right control div i coudnt check if the mouse is always over the left div to trigger the mouseover event again. the result is that the image from the left and the from the right is show 5%.

Is there a way to check the mouseover like this one?

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

the code of a controller div look like this

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

i use the way from the other answer... but its deletet....

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

by using the var isOver i could trigger the left or right

解决方案

To check whether something is being hovered, you can use the :hover selector, e.g.:

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

Example here: http://jsfiddle.net/AyAZx/5/

这篇关于jQuery在开始触发之前检查悬停状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！