CODEWITHSUNDEEP
jquery
Mona Coder
Mona Coder

Reputation: 6316

Animating background-position on mousedown mousemove Towrad the Mouse Move direction(Left/Right)

Can you please take look at this JSFIDDLE LINK let me know how I can Animate background-position on mousedown mousemove Towrad the Mouse Move direction(Left or Right)

As you can see I would like to add a function to enable users to click and animate image toward the left or right.

I have 

$(document).ready(function () {
 var cp=parseFloat($('.cycle').css('background-position'));
 $('.cycle').stop().animate({'background-position': cp+2000}, 20000); 
 $('.cycle').mouseover(function() {
                                     $('.cycle').stop(); 
     }); 
});

Upvotes: 0

Views: 1471

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 206347

I created something that does even more, hope will help:

LIVE DEMO

 $(function () {                // DOM ready

     var _mX = 0;               // (old Mouse Position) to define if mouse mover right or left
     var mDown = false;         // Mousedown flag
     var $cycle = $('.cycle');  // cache your elements!


     // Storing your animation in a function will help you to reset it once you do mouseleave
     function loop(){
        $cycle.stop().animate({ backgroundPosition: "+=20"}, 500, "linear", loop);
     }
     loop(); // start it!



     $cycle.on('mousedown mouseup',function(e){
         mDown ^= 1;    // 1/0  (Toggle our mDown flag)
     }).hover(function (e) {
         return e.type=="mouseenter"? $(this).stop() : loop() ;  // loop again on mouseleave 
     }).mousemove(function(e){
         var mX = e.clientX;
         var px = _mX > mX ? "-=4" : "+=4"; // Conditional Operator in action    
         if(mDown){ // only if we have a mouseDown flag (1/0 used as boolean)
             $cycle.css({backgroundPosition: px});
         }
         _mX = mX; // reset old mouse position to new one
     });

 });

Upvotes: 0

gvee
gvee

Reputation: 17171

So here's how I'd do it...

HTML

<div class="cycle">
    <div class="left"></div>
    <div class="right"></div>
</div>

Additional CSS

.cycle div
{
    height: 100%;
    width: 50%;
    float: left;
    opacity: 0.5;
}

    .cycle div.left
    {
        background-color: red;
    }
    .cycle div.right
    {
        background-color: blue;
    }

The idea here is that we have 2 child <div> elements that take up exactly 50% of the width of the parent. This means we can assign a differing event to each of the child divs to scroll left or right depending on which has the mouseover

Revised JQuery

 $(document).ready(function () {
     loopDeLoop();

     $('.cycle .left').mouseover(function () {
         loopDeLoop("left");
     });

     $('.cycle .right').mouseover(function () {
         loopDeLoop("right");
     });
 });

 function loopDeLoop(direction) {
     var cp = parseFloat($('.cycle').css('background-position'));

     var move = 2000;

     if (direction == "left") {
         move = -2000;
     }

     $('.cycle').stop().animate({
         'background-position': cp + move
     }, 20000);
 }

JSfiddle: http://jsfiddle.net/gvee/n558U/3/

Upvotes: 0

Related Questions