11496 sujets

JavaScript, DOM et API Web HTML5

[résolu] JQuery animate - marche pas sous FX / opera mais ok safari

Bonjour, je suis un newb sous jQuery et je teste tranquillement, un div qui s'escamote et apparait au rollover.

je code sous coda™ (osx) et je test avec le webKit de safari et ça marche très bien.
mais quand je teste le script sous Firefox et Opera, nada ... ça bouge pas.
le alert() fonctionne mais pas l'anim...

qu'est ce que j'ai fait qui va pas ?

merci de votre regard précieux.
je sèche un peu.
je vois pas bien où est la co...ie ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" >
	$(document).ready(function(){
		$("#outils").animate({"margin-top":"-31px"}, 600);
		$("#outils").hover( function() {
    		$(this).animate({'margin-top':'0px'}, 200);
                alert("tic");
		}, function () {
    		$(this).animate({'margin-top':'-31px'}, 600);
		});
	});
  </script>

  <style>
  	* {
  		margin: 0;
  		padding: 0;
  	
  	}
  	html, body {
  		height: 100%;
  		min-height: 100%;
  		bottom:0px;
  	}
  	p { color:green; }
  	#site {
				position: relative;
				width: 1024px;
				min-height: 100%;
				height: 100%;
				left: 50%;
				margin-left: -512px;
				background: white url(graph/fond_1.png) 0 0;
			}
  	#outils {
		  		position: relative;
		  		top: 0;
		  		width: 1024px;
		  		height: 42px;
		  		background: url(graph/outils.png) 0 0 no-repeat; 
		  		/* border: 1px solid red; */
		  		/* padding-bottom: 10px; */
		  		
		  	}
  	
  </style>
</head>
<body>
	<div id="site">
	<div id="outils"></div>
		<p>
	    	Move the mouse over a paragraph.
	  	</p>
	 	<p>
			Like this one or the one above.
	  	</p>
	</div>
</body>
</html>

Modifié par mrbbp (14 Nov 2009 - 11:21)
Ce n'est pas directement le problème, mais ça c'est pas bien:
<script src="http://code.jquery.com/jquery-latest.js"></script>

Je ne crois pas que la documentation de jQuery indique qu'il faille faire un hotlink vers leur site.
Étrange, il semble que ce soit le "margin-top" qui ne lui plaise pas.
J'ai remplacé par un top et là ça s'anime..

$("#outils").animate({"top":"-31px"}, 600);


C'est un bug référencé ou je suis le seul à qui ça arrive ?

Il n'aime pas animer le margin-top que ce soit en négatif ou positif !
ben pourquoi ?

j'aimais bien l'effet de slide que ça faisait sur tout le contenu du site.
là ça vient recouvrir mon div du dessous. c'est moche! Smiley bawling
Modifié par mrbbp (14 Nov 2009 - 11:14)
sous FX et opéra:

$("#outils").animate({"marginTop":"-31px"}, 600);


et pas 

$("#outils").animate({"margin-top":"-31px"}, 600);


je l'ai pas inventé ce "margin-top"... je l'ai lu dans la doc Smiley ohwell
Doc jQuery:
http://docs.jquery.com/Effects/animate

Citation qui va bien:
a écrit :
Note that properties should be specified using camel case, e.g. "marginLeft" instead of "margin-left."

margin-top, c'est la propriété CSS. marginTop, c'est l'interface DOM (element.style.marginTop). jQuery manipule le DOM, pas les styles CSS. CQFD. ;)
Sujet clos
Aller à