11496 sujets

JavaScript, DOM et API Web HTML5

Salut à tous,

Je viens vers vous car je souhaiterais avoir un petit conseil pour effectuer une animation avec jQuery et Ajax :

J'ai créer un petit script Ajax pour charger du contenu à la volée (je m’entraîne un peu) :


$('.item').on('click', $(this), function(event) {
		event.preventDefault();
		var idliens = $(this).attr('id'); // On récupère l'id du lien
		$('body').removeAttr('id').attr('id', (idliens)); //On modifie l'id du body si besoin
		$.get((idliens)+'.php', function(data) { //On attrape le fichier concerné grace à l'id
		$('#wrap').html(data); // On affiche le contenu dans la zone convenue
		});
	});


Tout s'affiche bien cependant je souhaiterais y apporter un peu d'animation : effectuer un slideToggle; pourquoi pas ajouter un loader, en plus d'afficher le contenu. Pour que ça soit moins "sec" comme action.

Malheureusement je ne sais pas comment m'y prends pour que ça soit propre.

Si quelqu'un peut m’aiguiller (sans me faire), ça serait cool !

A+ les alsanautes ! Smiley biggrin Smiley biggrin Smiley biggrin
Modifié par SuperMerguez (06 Dec 2013 - 11:43)
J'ai fait ça mais je pense qu'on peut faire mieux


$('#wrap').slideUp(400, function()   // On affiche le contenu dans la zone convenue
	{
		$(this).slideDown(400).html(data); 
        });
Bon comme je commence à piger le système j'ai fait un truc comme ça :


	$('.item').on('click', $(this), function(event) {
		event.preventDefault();
		var idliens = $(this).attr('id'); // On récupère l'id du lien
		$('body').removeAttr('id').attr('id', (idliens)); //On modifie l'id du body si besoin
		$('#wrap').append('<div class="loading"></div>'); //On affiche un loader
		$.get((idliens)+'.php', function(data) { //On attrape le fichier concerné grace à l'id
		$('#wrap').slideUp(400, function()// On affiche le contenu dans la zone convenue
		{
			$(this).slideDown(400).html(data);
			$('.loading').remove(); //Suppression du loader
		});
	});
	});

Modifié par SuperMerguez (06 Dec 2013 - 14:39)
Bon comme personne répond je me suis avancé un peu ça fonctionne bien Smiley cligne .

Cependant là ou ça pèche c'est que je cherche à faire une condition, quand l'id du body est le même que l'id du lien ne pas lancer la requête ajax.

Si ça parle à qqun...

a+