Attendre la fin d'une action avant requête ajax

NiRaDo_

10 Jul 2011 à 00:16

Bonjour tout le monde.

J'essai d'introduire un système de navigation totalement en ajax, avec des animations entre le passage d'une page à une autre.

Je voudrais que, lorsque je clique sur l'item du menu, le contenu s'efface doucement, puis réapparaît avec le nouveau contenu correspondant à l'item cliqué...

J'essai de faire ça en JQuery :


	$(document).ready(function(){
		
		$("#nav a").live('click', function() {
			$('#content .inner').slideUp('slow').delay(800);
			$.ajax({
			  url: $(this).attr('href'),
			  async : true,
			  success: function(d){
				$('#content .inner').html(d);
				$('#content .inner').slideDown('slow');
			  }
			});
			
			return false;
		});
	});

J'ai beau mettre un delay pour être sûr que le contenu soit complètement masqué avant... rien y fait. Le nouveau contenu apparaît d'abord, est masqué, et réapparaît.

Quelqu'un aurait-il une idée ? Smiley smile

Merci d'avance

~~supprimé~~

10 Jul 2011 à 02:20

Bonsoir à toutes et à tous,

c'est mon premier programme en JQUERY. Cela fonctionne ! Est-ce que cela répond à ta question ?

<!doctype html>
<html>
<head>
<title>test</title>
<script type="text/javascript" src="file:///E:/5.Jquery/Library/jquery-1.6.2.min.js"></script>

<script type="text/javascript">
$(document).ready(function()
{
	$("#nav").live('click', function()
	{
		$('#content').fadeOut('slow', function ()
		{
			$.ajax(
			{
				url: "test.html",
				type: "GET",
				dataType: "text",
				cache: false,
				success: function (d)
				{
					$('#content').html(d).fadeIn('slow');
				}
			});
		});
	});
});
</script>
</head>

<body>
<div id="nav">bla bla bla</div>
<div id="content">bla bla bla</div>
</body>
</html>

@+
Modifié par Artemus24 (10 Jul 2011 - 04:23)