animation - jQuery Animate not working on mouse move -
i'm working on animated image gallery can see in fiddle here jquery, has few features:
- hover on category reveal images in category
- click image change load in full size display
- when mouse on right hand or left had side of screen, list of images displaying scrolls left or right accordingly.
steps 1 , 2 work fine, item number 3 animations not working, first time working animations in jquery , have been pulling hair out.... can see goin wrong?
this code detecting mouse position (works fine) , animating accordingly (doesn't work)
$(document).mousemove(function(e) { var mx = e.pagex; var width = $(window).width(); var buffer = parseint(width) / 3; var rightbuf = width - buffer; var leftbuf = rightbuf - buffer; if(mx > rightbuf){ $('.menu-sub').animate({ "left": "-50px" }, "slow" ); }else if(mx < leftbuf){ $('.menu-sub').animate({ "left": "50px" }, "slow" ); }else{ } });
to move image list can use
$('.menu-sub ul').animate({ "margin-left": "-=50px" }, "slow" );
but should not use .mousemove()
because called every time mouse moves 1 pixel. use hidden divs , bind hover
have done headings. in mouseover
event execute
hovering = true; while (hovering) { // animate }
and set hovering
false in mouseout
event.
i updated fiddle @ least wait second before scrolling again: http://jsfiddle.net/3xkbmo8p/16/
Comments
Post a Comment