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!
- function toLeft() {
- $('.container').animate({
- 'background-position': '-=1'
- }, 1, 'linear', toLeft);
- }
-
- function toRight() {
- $('.container').animate({
- 'background-position': '+=1'
- }, 1, 'linear', toRight);
- }
-
-
- $(function () {
-
- $(".pause").click(function () {
- $('.container').stop();
- })
-
- $(".left").click(function () {
- $('.container').stop();
- toLeft();
- })
-
- $(".right").click(function () {
- $('.container').stop();
- toRight();
- })
-
- $('.container').mousedown(function (e) {
- $('.container').stop();
- var landing = e.clientX;
- $(this).mousemove(function (e) {
- if (e.clientX < landing) {
- $('.container').animate({
- 'background-position': '-=1'
- }, 1, 'linear', toLeft);
- } else {
- $('.container').animate({
- 'background-position': '+=1'
- }, 1, 'linear', toRight);
- }
- });
- });
- $('.container').mouseup(function () {
- $(this).unbind("mousemove");
- });
-
- })
-
Thanks