Effet inattendu avec anim() JQuery

bonjour,

je créé une petite animation Jquery:
une div#my_slide de 2000px de long défile dans une div#partner de 845px avec overflow:hidden;
j'anime la position left de my_slide et quand c'est fini, je réinitialise et je renvoi l'anim avec la fonction restart()

Si je survole le div parent, je suspend l'anim. si je dégage la souris, je fais repartir l'animation, en ayant stocké la valeur css de left (my_pos).

et donc le problème, c'est que quand l'animation redémarre, elle est plus lente ce qui en fait est logique puisque je redémarre avec une valeur initiale différente et une durée égale..

y a t-il un moyen de contourner ça??

Merci

<style type="text/css">
#div1	{
	width:900px;
	height:400px;
	background-color:#ddd;
	border:1px solid black;
	}
#partner	{
	width:845px;
	height:190px;
	margin:20px;
	background-color:#fff;
	border:1px solid black;
	overflow:hidden;
	position:relative;
	}

#slide		{
	width:2000px;
	height:170px;
	margin-top:10px;
	background-color:#FF9900;
	position:absolute;
	overflow:hidden;
	left:0;
	}
#slide	img	{
	margin-left:15px;
	margin-top:10px;
	}
</style>

$(document).ready(function() {
	var my_pos;
	
	function restart()	{
		$("#slide").css("left","0");		
		my_slide();
	}
	
	function my_slide()	{
	  $("#slide").animate({"left":"-830px"},6000,"linear", restart);
	}
	
	$("#partner").hover(
		function() {
			my_pos = $(this).find('#slide').css('left');
			$(this).find('#slide').stop();
		},
		function() {
			$(this).find('#slide').css('left',my_pos);
			my_slide(); }
		);
		
	my_slide();
		
		
});

Salut,

J'ai testé ceci

La durée est modifiée en fonction de la position gauche par rapport au déplacement total.

NB : J'ai un peu modifié la base de ton script. En effet, le déplacement à gauche de l'animate est automatiquement calculé sur base de la largeur du slide et du partner...
J'ai également supprimé ce qui ne servait à rien...

++
tm

oulala ... un grand merci à toi.....

c'est génial ton code...

moi en plus j'étais en train de continuer une usine à gaz, et calculant la position au suvol et en fraisant une règle de 3 pour calculer le temps adéquat pour relancer l'anim.

Je vais de suite expérimenter ton code..

apparemment ma fonction restart ne servait à rien... on dirait.

par contre au niveau du x, je veux que ça redémarre juste après que la fin du div#slide soit apparu à droite, mais ça je sens que c'est pas compliqué.

merci à toi , grand maître du javascript, lol

ah c'est vraiment nickel ton code....

au début ça marchait pas parce que moi j'utilise $(document).ready(function() { }); et je place le code en haut du fichier, lol.

je vais l'améliorer, avec un bouton stop et n calcul auto de la largeur de #slide en fonction du nombre d'éléments.

Je t montrerai mon nouveau code,
encore merci à toi.

au fait c'est quoi js fiddle, ça a l'air tout sympa, ce truc...

Re,

(function($){
    ...
})(jQuery)

Permet d'attendre que le DOM soit "ready" ET de rendre ton $ "local" pour ton script...

Content d'avoir pu aider...
Et si tu apprécies jsfiddle, tu aimeras peut-être dabblet.com ("idem" pour html/css) !

tm

tm™ a écrit :
Re,

(function($){
    ...
})(jQuery)

Permet d'attendre que le DOM soit "ready" ET de rendre ton $ "local" pour ton script...

Content d'avoir pu aider...
Et si tu apprécies jsfiddle, tu aimeras peut-être dabblet.com ("idem" pour html/css) !

tm

ben, ça marchait pas...

jusqu'à que je mettes $(document).ready(function()

bizarre

encore merci Tm pour ton aide...

j'ai un peu amélioré le truc, je fixe la largeur de #slide, au début, en comptant le nombre de div à l'intérieur, comme ça on peut modifier le html sans avoir à corriger le script.(div de 150px + 15px de marge gauche et 15px de marge droite à la fin)

j'ai rajouté un bouton #toggle pour stopper et relancer l'animation, mais j'avais un problème de conflit avec le hover() , alors j'ai créé une fonction bindMouse() et je détache les événements de survol ( unbind() ) quand je clique et je les re attache quand je clique une 2ème fois

j'ai pas trouvé mieux , et ça marche bien...

edit.. je pense que mon opérateur ternaire dans $("#toggle").toggle() n'est pas nécessaire, je vérifierai..

$(document).ready(function() {
	var size = ($('#slide').find($("div.sub")).size() * 165) + 15;
	$("#slide").css("width", size+"px");
	
  function mySlide(pos) {
	  
    var x = $('#slide').width() - $('#partner').width();
    var t = 20000 * ( (pos + x) / x);

    $("#slide").css('left', pos).animate({'left': -x},t , 'linear',function() {
          mySlide(0);
        }
      );
  }  // fin function mySlide
  
  function bindMouse()		{
	  $("#slide").bind("mouseover", function()	{
		$(this).stop();  
	  });
	  $("#slide").bind("mouseout", function()	{
		  mySlide( $('#slide').position().left );
	  });
  } // fin function bindMouse
  
  
  $("#toggle").toggle(
	  function() {   // fonction 1
		$("#toggle").html( ($("#toggle").html() == "Stop") ? "Restart" : "Stop"  );
		$('#slide').unbind();
		$('#slide').stop();
	  },
	  function() {  // fonction 2
		$("#toggle").html( ($("#toggle").html() == "Restart") ? "Stop" : "Restart"  );
		mySlide( $('#slide').position().left );
		bindMouse();
	  }
  );	

  mySlide(0);
  bindMouse();
});

Modifié par lionel_css3 (11 Sep 2012 - 00:19)

Cool !

lionel_css3 a écrit :
comme ça on peut modifier le html sans avoir à corriger le script.

Tu peux encore pousser la logique plus loin...
.outerWidth(), par exemple, te permets de récupérer la largeur de l'élément marges comprises.
Du coup, tu supprimes toute taille fixe de ton script !

A noter que

$("#slide").width(size);

pourra remplacer

$("#slide").css("width", size+"px");

Pour ton conflit, toggle vs hover, difficile de dire sans le html/css...
Pour l'opérateur ternaire, c'est effectivement le job du "toggle"...
Ici, ton script pourrait afficher "Stop" en arrêtant le slider... ;-P

Bonne continuation,
tm