Stopper une animation

**bast292** · 22/02/2011, 14h48

Bonjour, je suis en train de créer un site dans lequel j'ai intégrer un newsticker (défilement d'infos), seulement je sais que ca peut paraître lourd au bout d'un moment, j'aimerai donc que les utilisateurs puissent le stopper. Mais n'étant pas spécialiste du js j'ai quelques soucis.

Voilà le code que j'ai mis dans le head :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script type="text/javascript">	
	 $(function(){
     $("ul#ticker01").liScroll();
      }); 	
	</script>

et le fichier js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
jQuery.fn.liScroll = function(settings) {
		settings = jQuery.extend({
		travelocity: 0.04
		}, settings);		
		return this.each(function(){
				var $strip = jQuery(this);
				$strip.addClass("newsticker")
				var stripWidth = 0;
				var $mask = $strip.wrap("<div class='mask'></div>");
				var $tickercontainer = $strip.parent().wrap("<div class='tickercontainer'></div>");								
				var containerWidth = $strip.parent().parent().width();	//a.k.a. 'mask' width 	
				$strip.find("li").each(function(i){
				stripWidth += jQuery(this, i).outerWidth(true); // thanks to Michael Haszprunar
				});
				$strip.width(stripWidth);			
				var totalTravel = stripWidth+containerWidth;
				var defTiming = totalTravel/settings.travelocity;	// thanks to Scott Waye		
				function scrollnews(spazio, tempo){
				$strip.animate({left: '-='+ spazio}, tempo, "linear", function(){$strip.css("left", containerWidth); scrollnews(totalTravel, defTiming);});
				}
				scrollnews(totalTravel, defTiming);				
				$strip.hover(function(){
				jQuery(this).stop();
				},
				function(){
				var offset = jQuery(this).offset();
				var residualSpace = offset.left + stripWidth;
				var residualTime = residualSpace/settings.travelocity;
				scrollnews(residualSpace, residualTime);
				});			
		});	
};

et enfin ce sur quoi il agit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<ul id="ticker01">
 
      <li><span>22/02/2011</span>Bienvenue sur le site.....</li>
 
      <li><span>22/02/2011</span>texte 2 blablabla..........</li>
 
	   <li><span>22/02/2011</span> texte 3......................</li>
        </ul>