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
How do you know if an element is being hovered in JavaScript? Answer: Use the CSS :hover Pseudo-class You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery.
jQuery mouseover() Method The mouseover() method triggers the mouseover event, or attaches a function to run when a mouseover event occurs. Note: Unlike the mouseenter event, the mouseover event triggers if a mouse pointer enters any child elements as well as the selected element.
The hover() is an inbuilt method in jQuery which is used to specify two functions to start when mouse pointer move over the selected element. Syntax: $(selector).
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/
actionshrimp's answer is broken as of jQuery 1.9.1.
Use instead
$("#idOfYourElement:hover").length > 0
in your if condition
http://jsfiddle.net/mathheadinclouds/ZKGqe/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With