views:

33

answers:

3

Imagine this code (simplified)

<img id="leftArrow"/>
<div style="overflow:hidden; width:300px">
  <img id="wideImage" style="width:1000px; position:absolute; left:0"/>
</div>
<img id="rightArrow"/>

that will result in something like this
alt text

How do you make #wideImage scroll smoothly to the left when #rightArrow is hovered?

I am after something like this

$('#right').hover(function() {
  //On hover, accelerate #wideImage to the left
}, function() {
  //On mouse out, decelerate to stop
});

Thanks in advance!

+1  A: 

Maybe you should give a look @ this

Nicolo' Verrini
Thanks, I wasn't looking for looping but it's interesting and gave me an idea, +1
A: 

Here is nice tutorial that essentially does the same thing you are trying to do (automatically too)


Edit: Oh, your screen shot kind of threw me off, I was thinking you wanted to scroll through multiple images, but now I see you want to pan across one very wide one?

I made a demo to answer another question, but I updated it so you could just hover over the buttons to animate the image. I hope this is more like what you wanted.

fudgey
It's different, I need it to move on hover and stop on mouseout, but thanks anyway
Opps, sorry, I've updated my answer to something more like what I think you want.
fudgey
A: 

This sort of does it

$('#right').hover(function() {
  $('#wideImage').animate({ left: '-=50' }, 250, 'easeInQuad', function () {
    $('#wideImage').animate({ left: '-=600' }, 250, 'linear', function () {
      $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad');
    });
  });
}, function() {
  $('#wideImage').stop();
  $('#wideImage').animate({ left: '-=50' }, 250, 'easeOutQuad');
});