Question

I’m making a horizontal scroller using jQuery. I have it working using the following

var wrapper = $('#wrapper'),
    content = $('#scroll-content');


wrapper.bind('mousemove', function(e){

    var wrapper_width = wrapper.width(),
        content_width = content.width();
        //wrapper and 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 I calculate the new left margin, the slider spans 100% width of the screen.

This works, but I have two problems. It seems bad practise to be calling a calculation on every mousemove event as there are hundreds. Is there a better way, maybe using timers?

Another question, when the user first hovers the slider it jumps into place, I tried to use animate so that the slider would slide down to the correct position, but didn’t seem to work. (commented at the bottom)

any help with these problems would be great. Thanks

Answer 1

You can use Ben Alman’s Throttle Debounce plugin

And then do something like 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/