JQuery движение и ускорение в направлении на неведомую даль (гладкая прокрутки)

Question

Imagine этот код (упрощенный)

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

, что приведет к чему-то вроде этого
alt text http://home.exetel.com.au/aximili/tmp/stackoverflow-sample-scroll.jpg

Как вы делаете #wideImage плавно переходите влево, когда #rightArrow зависает?

Я после того, как что-то вроде этого

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

Спасибо заранее!

Answer 1

Такого рода делает это

$('#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'); 
}); 

Answer 2

Может быть, вы должны взглянуть @this

Answer 3

Вот nice tutorial, что по существу делает то же самое вы пытаетесь сделать (автоматически тоже)

---

Edit: О, ваш снимок экрана вид отбросил меня, я думал, что вы хотите прокрутить несколько изображений, но теперь я вижу, что вы хотите перебросить одну очень широкую?

Я сделал a demo, чтобы ответить на другой вопрос, но я обновил его, чтобы вы могли просто навести курсор на кнопки для анимации изображения. Надеюсь, это больше похоже на то, что вы хотели.