Changement du contenu d'une div avec effets combinés

Ajax avec jquery

Sujet résolu

28 novembre 2011 à 11:20:41

Bonjour à toutes et à tous,

je souhaiterais ajouter les fonctions "fadeIn/slideUp" et "slideDown/fadeOut" à la div "#contenu" du script jquery que j'ai trouvé à cette adresse :
http://top-news.fr/ajax-avec-jquery-ex [...] enu-d-un-div/
Je n'ai pas les compétences suffisantes pour parvenir au résultat voulu et demande de l'aide SVP.
Cordialement.

Voici le code :

<html>
<head>
<title>Ajax avec JQuery - Exemple</title>
<script type="text/javascript" src="jquery-1.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){ 	// le document est chargé
   $("a").click(function(){ 	// on selectionne tous les liens et on d�finit une action quand on clique dessus
	page=($(this).attr("href")); // on recuperer l' adresse du lien
	$.ajax({  // ajax
		url: page, // url de la page � charger
		cache: false, // pas de mise en cache
		success:function(html){ // si la requêté est un succès
			afficher(html);	    // on execute la fonction afficher(donnees)
		},
		error:function(XMLHttpRequest, textStatus, errorThrows){ // erreur durant la requete
		}
	});
	return false; // on desactive le lien
   });
});

function afficher(donnees){ // pour remplacer le contenu du div contenu
	$("#contenu").empty(); // on vide le div
	$("#contenu").append(donnees); // on met dans le div le r�sultat de la requete ajax
}
</script>
<style>
	a{
		padding:0px;
		margin:0px;
		border: 2px solid #DFDFDF;
		background: #AFAFAF;
	}
	#contenu{
		width:300px;
		height:300px;
		padding:25;
		border: 2px solid #DFDFDF;
	}
</style>
</head>
<body>
<h1>Ajax avec JQuery - Exemple</h1>

<a href="contenu1.html">contenu1.html</a>
 
<a href="contenu2.html">contenu2.html</a>

<div id="contenu">
	Contenu avant utilisation des liens
</div>

</body>
</html>

Je voudrais exécuter les actions à la ligne 22 "function afficher(donnees){ // pour remplacer le contenu du div contenu"
Merci

Desolation

28 novembre 2011 à 11:23:09

Au lieu de mettre ton code en type zCode, mets html.

Ta fonction donnera ça :

function afficher(donnees){
	$("#contenu").hide().html(donnees).fadeIn('slow').slideDown('slow');
}

http://chez-syl.fr/

m-line

28 novembre 2011 à 11:52:13

Merci beaucoup pour votre réponse rapide et efficace.
L'effet est très sympathique même si je voulais ceci :
1- on appelle une page html dans la div "#contenu" via le menu
2 - la div "#contenu" se vide de la page html en faisant un fadeOut (disparition en fondu si j'ai bien compris le terme) et un slideUp
3 - la div "#contenu" se recharge avec la nouvelle page html en faisant un fadeIn et un slideDown.

Si je pouvais parvenir à ce résultat ce serait parfait.
Très cordialement

Desolation

28 novembre 2011 à 11:57:12

J'ai essayé et tu ne peux pas cumuler les effets fade et slide. Les 2 ne peuvent pas être exécutés en même temps.
Il faut donc choisir...

http://chez-syl.fr/

m-line

28 novembre 2011 à 12:12:39

Merci beaucoup pour ta réponse "Désolation", tu m'a sorti de la mienne...
M-Line

Desolation

28 novembre 2011 à 12:15:03

Comme tu es nouveau tu as pas l'air de bien connaître les forums. Si ton problème est résolu il faut que tu cliques sur le bouton "Indiquer que mon sujet est résolu", quelque chose comme ça.

http://chez-syl.fr/

hani_1

28 novembre 2011 à 12:16:22

Voici le comportement le plus propre et le plus proche de ce tu veux que j'ai trouvé

function afficher(donnees){
    var $objJQ = $("#contenu");
    $objJQ.fadeOut('slow',function(){
        $objJQ.html(donnees);
    	$objJQ.fadeIn('slow');
    });
}

Never Trust User Input This is the truth

Desolation

28 novembre 2011 à 12:20:25

Et le chaînage hani_1 ?

http://chez-syl.fr/

hani_1

28 novembre 2011 à 13:34:04

function A(d){var $o=$("#contenu");s=600;$o.fadeOut(s,function(){$o.html(d).fadeIn(s);});}
@Desolation :
Voilà j'ai un peu optimisé.
Alors heureux ?

Never Trust User Input This is the truth

Desolation

28 novembre 2011 à 13:45:00

C'était pas non plus l'objet de ma remarque.

http://chez-syl.fr/