Having Issue on Mousedown + Mousemove Smooth Functionality

Having Issue on Mousedown + Mousemove Smooth Functionality

Can you please take a look at This Demo  and let me know what I am doing wrong on adding Mousedown and Mousemove event to the animation?

As you can see even the button not working after mouse event and I cant pause the animation!

  1. function toLeft() {
  2.     $('.container').animate({
  3.         'background-position': '-=1'
  4.     }, 1, 'linear', toLeft);
  5. }

  6. function toRight() {
  7.     $('.container').animate({
  8.         'background-position': '+=1'
  9.     }, 1, 'linear', toRight);
  10. }


  11. $(function () {

  12.     $(".pause").click(function () {
  13.         $('.container').stop();
  14.     })

  15.     $(".left").click(function () {
  16.         $('.container').stop();
  17.         toLeft();
  18.     })

  19.     $(".right").click(function () {
  20.         $('.container').stop();
  21.         toRight();
  22.     })

  23.     $('.container').mousedown(function (e) {
  24.         $('.container').stop();
  25.         var landing = e.clientX;
  26.         $(this).mousemove(function (e) {
  27.             if (e.clientX < landing) {
  28.                 $('.container').animate({
  29.                     'background-position': '-=1'
  30.                 }, 1, 'linear', toLeft);
  31.             } else {
  32.                 $('.container').animate({
  33.                     'background-position': '+=1'
  34.                 }, 1, 'linear', toRight);
  35.             }
  36.         });
  37.     });
  38.     $('.container').mouseup(function () {
  39.         $(this).unbind("mousemove");
  40.     });

  41. })

Thanks