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

问题描述

我用jquery创建了一个小的滑块插件.当鼠标悬停在左或右控件div上时，图像将从左或右滑动5％.点击后，图像滑入100％

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%

问题是，当在动画的整个幻灯片过程中从左向右控制div移动鼠标时，我会检查鼠标是否始终在左div上方以再次触发mouseover事件.结果是从左到右的图像显示为5％.

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

控制器div的代码如下

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

通过使用var isOver我可以触发向左或向右

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

推荐答案

要检查是否已将某些内容悬停，可以使用:hover选择器，例如:

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

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

此处的示例: http://jsfiddle.net/AyAZx/5/

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