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.