Animate content scroll in Jquery UI Slider Widget

Question

I'm using the Jquery UI Slider Widget to create a horizontal scrolling website. Navigation is via the left and right buttons (hover/click to scroll) and the ui slider bar.

Everything is working fine except I'm having trouble achieving a smooth scroll when navigation is via clicking on the slider bar. Currently it just jumps to the new ui.value location.

I've setup a jsFiddle here: http://jsfiddle.net/stellar/HXgwa/9/ and below is the bit I'm having the issue with:

margin=Math.round(ui.value / 100 * (p - c));

if (slideDrag === false){
    scrollContent.animate({"margin-left" : margin+"px" }, 300);
}

Strangely enough, if I change the variable 'margin' to an exact number the transition animates, but I can't seem to achieve the same effect when the margin is generated dynamically.

Any help would be awesome as I've been struggling with this for hours.

P.S. I'm relatively new to javascript and jquery so I hope my code is up to standard - any feedback is welcomed :)

Answer 1

If you comment out

scrollContent.animate({"margin-left" : margin+"px" }, 300);

you'll notice that when clicking on slide bar scrollContent still moves to a new position. This means that calling animate afterwards will do nothing since margin-left has already changed at some other point of your code. So you need to check whether dragging took place or not before changing margin-left.

A rough example can be found here (look for //EDIT in two places), http://jsfiddle.net/HXgwa/13/ I have not checked your code just added a condition related to dragging before your code changing margin-left.