11549 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

J'ai besoin de changer le positionnement d'une div ( position: absolute ) d'un top:0 à bottom:0 en Jquery. En somme top doit reprendre sa valleur par defaut et bottom se mettre à 0. Et pas moyen de remettre la valeur par defaut de top, du coup, ça bouge pas. Le tout dans une fonction animate.

Voici le code Jquery :

$("div.bouton_bas").mouseover(function() { //When trigger is over...
 			var downTo = $("#Contenu").css("height");
 			var downTo = downTo.substring(0,downTo.length-2) / 1.70;
 			//alert(downTo);
		//var width = $(this).css("width");
		//$(this).find("ul.subnav").css("min-width", width );
		$("#Contenu").stop().animate({
				top:'auto' // ---->>> C'est là que ça coince...
				bottom: '0'
			}, 2000, function() {
			// Animation complete.
		});	 
 	});


Le but de la manoeuvre est de faire un défilement vertical sur un div en survolant un bouton (en se passant de la scrollbar ).

Votre aide me sera précieuse alors merci d'avance ^^
J'aurai du nétoyer un peu mon code avant de vous le balancer ^^

J'ai trouver une solution. Je passe maintenant au problème de l'arrêt du défilement et de sa reprise car lorsque que ça reprend le défilement ça se repositionne en top:0 du coup. Bon je cherche... Je vous remet le code nétoyé ^^


$("div.bouton_bas").mouseover(function() { 
		$("#Contenu").css("top", "auto" );
		$("#Contenu").stop().animate({
				bottom: '0'
			}, 2000, function() {
			// Animation complete.
		});	 
 	});
 	$("div.bouton_bas").mouseout(function() {
 			$("#Contenu").stop();
 	});
Une pause, ça fait toujours du bien pour revenir sur un problème plus serènement. J'ai trouvé ma solution. C'est pas un script qui roxe du poney mais il fait défiler le contenu verticalement au survole des boutons, s'arrête et reprend comme il faut.

J'ai contourné le problème, se n'est pas la fonction animate qui gère tout le truc, j'initialise le positionnement en css et récupérant les valeurs actuel avant de faire appel à l'anim.

Voici le code Jquery, ça servira peut-être un jour à quelqu'un :



	$("div.bouton_bas").mouseover(function() { //When trigger is over...
		var top = $("#Contenu").css("top");
		var bottom = $("#Contenu").css("bottom");
		$("#Contenu").css("top", "auto" );
		$("#Contenu").css("bottom", bottom );
		$("#Contenu").stop().animate({
				bottom: '0'
			}, 2000);	 
 	});
 	$("div.bouton_bas").mouseout(function() {
 			$("#Contenu").stop();
 	});
 	
 	$("div.bouton_haut").mouseover(function() { //When trigger is over...
		var top = $("#Contenu").css("top");
		var bottom = $("#Contenu").css("bottom");
		$("#Contenu").css("top", top );
		$("#Contenu").css("bottom", "auto" );
		$("#Contenu").stop().animate({
				top: '0'
			}, 2000);	 
 	});
 	$("div.bouton_haut").mouseout(function() {
 			$("#Contenu").stop();
 	});