How To Disable Mouse Enter Event and Only Detect Mouse Move to Left or Right
Can you please take a look at
This Demo and let me know how I can disable any animation on Mouse-enter in the
#carousel-example-generic
?
I want to apply the
.css()
rules
ONLY when the mouse is moving to Left or Right on the
#carousel-example-generic
?
what is happening now is, as soon as the mouse enters into the
#carousel-example-generic
jQuery is running the CSS rule but I want to do it only when the mouse is moving to left or right.
Here is the code I have
- var startingPos = 0;
- $('#carousel-example-generic').mousemove(function(e) {
- var x = e.pageX - this.offsetLeft;
- var y = e.pageY - this.offsetTop;
- var xPercent = x / $(this).width() * 100
- var yPercent = y / $(this).height() * 100
- var moveMouse = (e.pageX * -1 / 3);
- if (startingPos == 0) {
- startingPos = moveMouse;
- return;
- } else {
- moveMouse = moveMouse - startingPos;
- }
- jQuery('#img-1').css({
- 'left': moveMouse + 'px'
- });
- jQuery('#img-2').css({
- 'left': moveMouse + 'px'
- });
- });
-
- jQuery('#carousel-example-generic').mouseleave(function() {
- jQuery('#img-1').animate({
- 'left': '0'
- });
- jQuery('#img-2').animate({
- 'left': '0'
- });
- });
Thanks