Discussion :

[KumKum007]

Bonjour à tous,

utilisant le cms Drupal je cherche à ajouter dans mes mises en page dorénavant un peu plus de dynamisme avec le JQuery.
Je débute donc avec ce language (je galère un peu...) et je me heurte à un problème pour réaliser une animation de div sur ma page.
Je souhaite ouvrir automatiquement une div lorsque celle-ci et son contenu (img ou texte) sont chargés puis faire l'animation inverse lorsque nous changeons de page.
Dans un 1e temps j'ai voulu déjà ouvrir automatiquement ma div avec le code suivant mais cela ne fonctionne pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$("#photo").load(function() {
     $(this).show("slide", { direction: "down" }, 1000);
});

J'ai essayé avec l'événement ready et ceci ne fonctionne pas non plus.

Pouvez vous me donner une syntaxe ou des pistes pour réussir cet effet ?

Merci d'avance pour votre aide

[SpaceFrog]

parce que show ne fait pas ça ...

les paramètres de show sont speed et callback

regarde plutot du coté de slideDown slideToogle ou animate ...

[KumKum007]

J'ai bien essayé de modifier show par les autres effets mais cela ne fonctionne pas, j'ai rafraichi ma page et le bloc est affiché direct sans effet. Je pense que ma syntaxe n'est pas bonne.
Pour bien comprendre, ne faut il pas cacher ma div avant d'appliquer l'effet ? si oui comment faire ?

Merci pour vos réponses.

[KumKum007]

Ok c'est bon j'ai l'impression d'avoir trouvé la syntaxe pour l'ouverture de la div seule. Par contre pour le chargement de son contenu j'utilise ready ou load comme événement ?
Enfin, si je veux changer de page ais-je moyen de faire l'effet inverse pour refermer ma div ?

Merci pour vos réponses.

[SpaceFrog]

slideToggle

à priori vu ce que tu recherches il faudrait faire un load et sur le callback du load faire un slideToggle ou le slideToggle sur un onsucceed d'ajax ...

[KumKum007]

Bon je m'en sors pas trop là...Depuis hier je suis dessus et je n'arrive toujours pas à obtenir l'effet désiré.

Pour l'instant j'ai juste cela qui fonctionne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function() {
     $("#photo").toggle(1400);
});

Or je souhaite déjà obtenir un slide horizontal de droite ou de gauche. L'effet toogle ne fait l'effet que du haut ou bas.
J'ai bien essayé de mettre ça en place mais rien ne se passe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function() {
     $("#photo").toggle( "slide", { direction: "left" }, 2000 );
});

Par ailleurs, je souhaite que l'effet arrive à l'ouverture de la div et puis que la div se ferme quand nous changeons de page. Il faut apparemment passer par un callback. Malgré mes essais multiples je n'arrive pas à monter mon code.

Avez vous une base de code à me donner pour réaliser cet effet ? Je ne trouve pas de tuto traitant réellement de ce type d'effet auto.

Merci pour vos aides.

[SpaceFrog]

animate css comme ça tu gères le sens...

[KumKum007]

Ok c'est cool j'ai réussi à faire l'animation d'ouverture avec animate.
Voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
$(document).ready(function() {
    $("#photo").animate({"left": "-=885"}, "slow");				
});

C'était pas sorcier mais il faut bien trouver la syntaxe.

Maintenant ai-je moyen de réaliser l'animation inverse afin de refermer ma div si je clique sur un lien pour ouvrir une autre page ? Faut il utiliser la propriété unload ?
Je cherche mais le principe et la syntaxe me paraissent encore obscure..

Merci.

[SpaceFrog]

[message subliminal]
merci de penser au bouton # de l'editeur ..
[/message subliminal]

a quel moment le repli ?

[KumKum007]

ok pour la balise code

Sinon pour l'effet je souhaite donc ouvrir la div au chargement de la page. Puis quand on change de page est il possible de lancer l'animation inverse pour la fermer (avant d'ouvrir la nouvelle page) ?

[SpaceFrog]

"Puis quand on change de page " ...
ton changement de page se fait comment ?? un lien tu parles d'une nouvelle page ? ou d'un chargement partiel (ajax , load ??? )

si c'est totale nouvelle page faut passer par onbeforeunload

[KumKum007]

Tout d'abord merci de m'aider, j'avance et comprend beaucoup mieux

Il s'agit d'un changement totale de la page et non d'une partie.
J'ai bien noté la fonction onbeforeunload mais j'ai fait un test avec simplement un unload et j'arrive à lancer un événement, voici le code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
$(document).ready(function() {
				$("#photo").animate({"left": "-=885"}, "slow");
				$(window).unload( function() {
					//alert("Fermeture");
					$("#photo").animate({"left": "+=885"}, "slow");
				}
				);
			});

L'alerte Fermeture apparait bien avant mon changement de page par contre j'ai voulu lancer mon animation inverse et là ça ne marche pas.
Une idée ? faut-til remplacer mon unload par onbeforeunload ?

Merci

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 $(window).bind('beforeunload',function() {
					$("#photo").animate({"left": "+=885"}, "slow");})

[KumKum007]

Yes ça marche.
Merci beaucoup. Je continue à paufiner mon code.
Ouf je commençais à désespérer, je pars acheter un bouquin sur le Jquery

Merci encore.

[SpaceFrog]

Doit y avoir une edition plus récente mais sinon
http://javascript.developpez.com/livres/#L9781933988351

[KumKum007]

ok merci je vais regarder ça.

C'est un langage que je ne connaissais pas d'où ma difficulté à faire des choses je pense assez "simples". Étant graphiste c'est vraiment puissant car cela permet d'intervenir sur les éléments de diverses façons.

Je continue à améliorer mon code. Si problème je reviendrais ptet à la charge