jQuery - ScrollTo et Serial Scroll ne fonctionnent pas ensemble

Question

J'ai testé le plugin scrollTo(), mais j'ai besoin d'un moyen d'arrêter l'animation de défilement, donc je regarde serialScroll().

Voici ce que je avec scrollTo:

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

Ma question est, comment dois-je faire la même chose avec serialScroll? Je ne peux pas le faire fonctionner de la même manière que scrollTo, n'est-ce pas ce que c'est supposé faire, juste ajouter des tonnes d'options supplémentaires?!

Answer 1

Comme SerialScroll se fixe plusieurs événements (démenés l'événement stop) vous pouvez utiliser toggle pour démarrer/arrêter le défilement en fonction des clics:

// 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'); 
}); 

Sur le code HTML suivant:

<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> 

Example (edit the source)

note: lorsque l'événement stop est appelé, l'animation s'arrête sur l'élément défilant, pas immédiatement. Donc, si vous cliquez sur la première image pendant qu'elle défile vers la seconde, l'animation continue jusqu'à ce que la deuxième image soit visible puis s'arrête. Cela signifie également que lorsque vous utilisez cycle: true (la valeur par défaut), si vous cliquez pendant le retour à la première image, l'animation continue jusqu'à ce que la première image soit affichée, puis s'arrête.

EDIT:

Après avoir regardé un peu plus profond, j'ai trouvé this post sur le blog de Ariel Flesler (l'auteur plugins). Dans la section snippets, un script est inclus sur la façon d'arrêter l'animation en survol. Il comprend une note:

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

Notez que le stop() supplémentaire dans la gâchette. Basé sur le code que je posté ci-dessus, vous pouvez changer la fonction toggle() à:

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

pour produire l'effet désiré. Updated example here (edit it)