Discussion :

[krizentherm]

Bonjour,

Je suis en train de bloquer sur une fonctionnalité en Jquery, voila j'ai une page web qui fait apparaitre des images à l'écran au fur et à mesure, et lorsque que l'écran est remplit j'aimerai que la page web scroll down tout en bas automatiquement pour que l'on puisse voir les nouvelles images apparaitre.

Je voudrais utiliser .animate({scrollTop:value}, 'slow'}); pour faire une effet de défilement agréable. Mais j'aimerai aussi qu'à la fin, quand l’animation du scroll est terminé, que le programme appel une autre fonction qui va permettre de continuer l'affichage, voici le code :

Code javascript :

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

1
2
3
4
5
6
7
8
9
function scroll_bottom(to_go, id, DIR_PICTURES, top, i, left)
{
	$('html, body').animate({scrollTop:to_go}, TIME, 
		{complete: function()
			{
				display_the_picture(id, DIR_PICTURES, top, i, left);
			}
		});
}

display_the_picture étant la fonction que j'aimerai appeler que quand le défilement est terminé. Et TIME est une variable globale.

Mais cela ne fonctionne pas, en cherchant sur internet j'ai trouvé plusieurs syntaxes possible pour faire défiler lentement ou encore pour appeler une fonction après une animation, mais rien à faire, je coince et je n'arrive pas à faire fonctionner les deux en même temps

J'aurai voulu savoir si cette façon de faire est la bonne ?

Merci beaucoup pour votre aide

[danielhagnoul]

Bonsoir

La méthode "animate" à deux écritures possibles : http://api.jquery.com/animate/

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
/*
$( "html, body" ).animate(
	{
		"scrollTop" : $( "body" ).height()
	},
	{ 
		"duration" : 5000,
		"complete" : function(){
 
			// votre code
 
		}
	}
);
*/
 
/*
 * Écriture alternative
 */
$( "html, body" ).animate( { "scrollTop" : $( "body" ).height() }, 5000, function(){
 
	// votre code
 
});

[krizentherm]

Bonjour merci beaucoup pour ta réponse,

Mais j'ai encore un soucis, j'ai l'impression que mon programme se duplique en quelque sorte.

Apres avoir fait plein de tests avec des alerts pour savoir exactement où passer mon code :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
function scroll_bottom(to_go, id, DIR_PICTURES, top, i, left)
{
	$( "html, body" ).animate(
	{
		"scrollTop" : to_go
	},
	{ 
		"duration" : TIME,
		"complete" : function()
		{
 			display_the_picture(id, DIR_PICTURES, top, i, left);
		}
	});
}

Quand je passe une seule fois dans cette fonction, elle appelle deux fois de suite la fonction display_the_picture.

Et là je ne sais pas du tout pourquoi

[krizentherm]

ahaa je viens de me débloquer, pour ceux qui auront le meme soucis, animate appelle le nombre de fois la fonction callback, le nombre d'objet qu'on passe.

comme je mettais :

Code :

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

$('html, body')

La fonction était appelé deux fois.

[Bovino]

Bah oui, en même temps, c'est logique : ton sélecteur récupère deux éléments et comme tu appliques l'animation à la sélection récupérée, cela fait deux animations donc deux fois le callback.

[krizentherm]

Oui maintenant ça me parait logique. Par contre l’animation du scroll ne marche pas toujours très bien.

Je voudrais faire un défilement fluide, sauf que des fois, ca ne défile pas et l’ascenseur se "téléporte" immédiatement en bas.

Je pensais qu'en faisant une fonction callback qui ne se déclenche que quand le défilement est terminé corrigerait le problème mais non (d'où la raison de mon post).

du coup que je fasse avec un callback pour continuer ou bien tout simplement :

Code javascript :

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

1
2
 
$('html, body').animate({scrollTop:to_go}, TIME);

ca ne change rien, par moment le défilement ne marche plus et l'ascenseur se téléporte en bas

ya til une astuce pour forcer le défilement coute que coute ?

[danielhagnoul]

La raison du $('html, body') c'est un problème de compatibilité avec tous les navigateurs.

Je n'ai pas l'impression que vous avez testé mon code : $( "html, body" ).animate( { "scrollTop" : $( "body" ).height() }, 5000 );.

[krizentherm]

Si si mais il ne semble pas fonctionner chez moi (je suis sous FF).