jQuery - ScrollTo и Serial Scroll не работают вместе

Question

Я протестировал плагин scrollTo (), но мне нужен способ остановить анимацию прокрутки, поэтому я смотрю на serialScroll ().

Вот что я использовал с scrollTo:

$('#scroller').scrollTo('1000px', 3000);

Мой вопрос: как мне сделать то же самое с serialScroll? Я не могу заставить его работать так же, как scrollTo, разве это не то, что он должен делать, просто добавить тонны дополнительных опций?!

Answer 1

Поскольку SerialScroll связывает несколько событий (включая событие stop), вы можете использовать toggle для запуска / остановки прокрутки на основе кликов:

// setup serialScroll to scroll the images in the 'serialScroll-test' div along
// the y-axis.
$('#serialScroll-test').serialScroll({items: 'img', duration: 2000, axis: 'y', interval: 1, force: true});
// since we used the "force: true" option to auto-start the animation we use
// "stop" as the first function to toggle and "start" second.
$('#serialScroll-test').toggle(function(){ 
  $('#serialScroll-test').trigger('stop.serialScroll'); 
}, function() { 
  $('#serialScroll-test').trigger('start.serialScroll'); 
});

В следующем HTML:

  <div id="serialScroll-test" style="float: left; width: 600px; height: 333px; overflow: hidden;"> 
    <img class="scrollable" src="http://farm4.static.flickr.com/3489/3849497254_4722754872.jpg" alt="IMG_7997" /> 
    <img class="scrollable" src="http://farm3.static.flickr.com/2487/3867263002_f6b368d983.jpg" alt="IMG_8005" /> 
    <img class="scrollable" src="http://farm3.static.flickr.com/2528/4043006363_81931d7985.jpg" alt="IMG_2235" /> 
  </div> 

Пример ( редактирование источника )

note : когда вызывается событие stop, анимация останавливается на прокручиваемом элементе, а не сразу. Поэтому, если вы нажмете на первое изображение во время прокрутки ко второму, анимация будет продолжаться до тех пор, пока второе изображение не появится, а затем остановится. Это также означает, что при использовании cycle: true (по умолчанию), если вы нажмете во время возврата к первому изображению, анимация будет продолжаться до тех пор, пока первое изображение не отобразится, а затем остановится.

EDIT

Посмотрев немного глубже, я нашел эту запись в блоге Ариэля Флезлера (автор плагинов). В разделе фрагментов приведен сценарий, как остановить анимацию при наведении курсора. Включает примечание:

// You can temove the .stop() to let it finish the active animation
...
   $(this).stop().trigger('stop');
...

Обратите внимание на дополнительные stop() в триггере. На основе кода, который я разместил выше, вы можете изменить функцию toggle() на:

$('#serialScroll-test').toggle(function(){ 
  $('#serialScroll-test').stop().trigger('stop.serialScroll'); 
}, function() { 
  $('#serialScroll-test').stop().trigger('start.serialScroll'); 
});

для получения желаемого эффекта. Обновленный пример здесь ( отредактируйте его )