animation - jQuery horizontal scrolling display -


i'm making horizontal scroller using jquery. have working using following

var wrapper = $('#wrapper'),     content = $('#scroll-content');   wrapper.bind('mousemove', function(e){      var wrapper_width = wrapper.width(),         content_width = content.width();         //wrapper , content width      var tmp  = e.pagex * (content.outerwidth() - wrapper.outerwidth()) / wrapper.outerwidth();     //calculate new left margin      content.css({ 'margin-left': '-'+tmp+'px' });     //set margin according      /*content.animate({         'margin-left': '-'+tmp+'px'     }, 30, 'easeoutsine');*/ }); 

every mousemove event calculate new left margin, slider spans 100% width of screen.

this works, have 2 problems. seems bad practise calling calculation on every mousemove event there hundreds. there better way, maybe using timers?

another question, when user first hovers slider jumps place, tried use animate slider slide down correct position, didn't seem work. (commented @ bottom)

any these problems great. thanks

you can use ben alman's throttle debounce plugin

and this:

$(document).ready(function() {      var wrapper = $('#wrapper'),         content = $('#scroll-content');      wrapper.bind('mouseenter mousemove', $.throttle(200, mousemove));      function mousemove(e) {         var wrapper_width = wrapper.outerwidth(),             content_width = content.outerwidth();         //calculate new left margin         var tmp = e.pagex * (content_width - wrapper_width) / wrapper_width;          content.stop().animate({             'margin-left': '-' + tmp + 'px'         }, 'fast', 'easeoutsine');     } }); 

example: http://jsfiddle.net/petersendidit/rkbp6/1/


Comments

Popular posts from this blog

linux - Mailx and Gmail nss config dir -

c# - Is it possible to remove an existing registration from Autofac container builder? -

php - Mysql PK and FK char(36) vs int(10) -