11494 sujets

JavaScript, DOM et API Web HTML5

[Résolu]JQuery-Attendre l'exécution de toute l'action de l'évènemen

Bonjour,

Au départ, je cherchais un jquery ui tabs mouseover mais avec effet lors du changement d'onglet, il y a avec mouseover mais avec effet non (slide, explode, etc)
J'ai donc décidé d'en créer moi même
Mon principe est simple: j'ai 4 pages donc 4 div dont les 3 en display:none au départ
Voici d'abord le code JS jquery de la simulation de ui tabs d'abord

         jQuery(document).ready(function() {
             jQuery('#tab1').mouseover(function() {
                 jQuery('#page4').hide();
                 jQuery('#page3').hide();
                 jQuery('#page1').hide();
                 jQuery('#page2').show();
             });
             jQuery('#tab2').mouseover(function() {
                 jQuery('#page4').hide();
                 jQuery('#page1').hide();
                 jQuery('#page2').hide();
                 jQuery('#page3').show();
             });
             jQuery('#tab3').mouseover(function() {
                 jQuery('#page3').hide();
                 jQuery('#page1').hide();
                 jQuery('#page2').hide();
                 jQuery('#page4').show();
             });
             jQuery('#tab0').mouseleave(function() {
                 jQuery('#page4').hide();
                 jQuery('#page3').hide();
                 jQuery('#page2').hide();
                 jQuery('#page1').show();
             });
         });

Ensuite j'ajoute jQuery UI EFFECTS

         //callback function to bring a hidden box back
         function callbackpage2() {
             setTimeout(function() {
                jQuery("#page2:hidden").removeAttr('style').hide().fadeIn();
             }, 0);
         };
         function callbackpage3() {
             setTimeout(function() {
                 jQuery("#page3:hidden").removeAttr('style').hide().fadeIn();
             }, 0);
         };
         function callbackpage4() {
             setTimeout(function() {
                 jQuery("#page4:hidden").removeAttr('style').hide().fadeIn();
             }, 0);
         };
         function callbackpage1() {
             setTimeout(function() {
                 jQuery("#page1:hidden").removeAttr('style').hide().fadeIn();
             }, 0);
         };
         jQuery(document).ready(function() {
             var options = {};

             jQuery('#tab1').mouseover(function() {
                 jQuery('#page4').hide();
                 jQuery('#page3').hide();
                 jQuery('#page1').hide();
                 jQuery('#page2').show();
                 jQuery('#page2').effect('slide', options, 500, callbackpage2);
             });
             jQuery('#tab2').mouseover(function() {
                 jQuery('#page4').hide();
                 jQuery('#page1').hide();
                 jQuery('#page2').hide();
                 jQuery('#page3').show();
                 jQuery('#page3').effect('slide', options, 500, callbackpage3);
             });
             jQuery('#tab3').mouseover(function() {
                 jQuery('#page3').hide();
                 jQuery('#page1').hide();
                 jQuery('#page2').hide();
                 jQuery('#page4').show();
                 jQuery('#page4').effect('slide', options, 500, callbackpage4);
             });
             jQuery('#tab0').mouseleave(function() {
                 jQuery('#page4').hide();
                 jQuery('#page3').hide();
                 jQuery('#page2').hide();
                 jQuery('#page1').show();
                 jQuery('#page1').effect('slide', options, 500, callbackpage1);
             });
         });

Le soucis c'est que si on fait des mouvements rapides ou brusques sur les onglets (des DIV de id=tab0 à tab4), un évènement n'a donc pas fini de s'exécuter qu'un autre arrive
Quelquefois tout est en show() ou tout est en hide(), 2 en show(), l'animation boucle, etc.

Bref, je cherche à éviter cela, en effet ici, l'animation dure un demi-seconde
Modifié par dummycreation (22 Apr 2010 - 07:52)
En fait, je me demande comment bien écrire du javascript pour éviter qu'un fonction n'a pas fini de se terminer et qu'une autre déclenchée par un évènement s'exécute déja???
Bonjour,

Je ne pense pas qu'il soit nécessaire de passer par une réécriture de 'Jquery UI Tabs' comme tu l'as fait pour faire ce que tu veux.

Je pense qu'en creusant cette piste on peut le faire :


$("#tabs").tabs({
	event: 'mouseover',
	fx: { 	height: 'toggle', 
		 opacity: 'toggle',
		 duration: 400  
	}
});


Maintenant, la question que tu soulèves est intéressante sur comment assurer que le mouseover precedent soit bien fini avant de déclencher le suivant. J'avoue ne pas avoir de solution pour le moment... Je repasserai si je trouve une technique Smiley langue
En effet, c'est l'effet que je cherchais qui m'a fait opter pour la réécriture des onglets mais là tu me proposes
fx: { height: 'toggle',
opacity: 'toggle',
duration: 400

Intéressant merci! C'est quoi toggle ici et peut-on avoir un effet Fade? car là c'est du SlideDown?
En fait, les options de FX sont passées dans la fonction animate.
Tu as la possibilité d'avoir un effet différent pour l'apparition et la disparition comme montré ci dessous. Avec comme règle:
hide Effect = fx[0]
show Effect = fx[1]

$("#tabs").tabs({
	event: 'mouseover',
	fx: [{ 	
			height: 'swing', 
			opacity: 1,
			duration: 'fast'  
		},{ 	
			height: 'toggle', 
			opacity: 'toggle',
			duration: 'slow'  
	}]
});


Par contre, tu vas être restreint en effet aux simples properties
car l'effet est construit de la sorte:

animate(
  fx properties, 
  fx.duration || 'normal', 
  function() {
    .... // fonction pré écrite (non maitrisable à priori)
  }
);
Nathan- a écrit :
Hello!

peut-être une piste avec la fonction .stop()
http://api.jquery.com/stop/

il s'agirait de stopper tous les autres effets avant d'en lancer un nouveau...

Salutations!

J'ai pas remarqué ta réponse Nathan
C'est une telle fonction que je cherche en effet mais que faire dans le cas où on ne sait où stopper car il y a plusieurs fadeIn qui s'exécute?
$("*").stop();

Je suppose que ca doit stopper toutes les animations en cours sur tous les éléments... à vérifier...
Ça ne génère pas une erreur mais cela arrête toutes les animations dans ma page or j'utilise des slideshows ailleurs
J'utilise encore le code de mon 1er message mais avec un fadeIn() comme effet, tu vois qu'il est impossible de savoir quel div en cours de fade in
J'ai essayé avec le div qui contient les div des pages mais erreur !!!
tu peux toujours ajouter une classe "a-arreter" aux éléments que tu as envie de stopper, et faire un $(".a-arreter").stop();
par exemple

$("#truc").addClass("fade-en-cours").fadeIn(1000,function(){
    $(this).removeClass("fade-en-cours");
});


Ceci devrait ajouter une classe "fade-en-cours" aux éléments en train de "fader" et l'enlever quand le "fade" est fini. Ensuite, tu peux faire
$(".fade-en-cours").stop();

Modifié par Nathan- (20 Apr 2010 - 17:10)
J'ai fait

jQuery(document).ready(function() { 
	 jQuery("#page1").addClass("fade-en-cours");
	 jQuery("#page2").addClass("fade-en-cours");
	 jQuery("#page3").addClass("fade-en-cours");
	 jQuery("#page4").addClass("fade-en-cours");

	 jQuery('#tab1').mouseover(function() {
		 jQuery(".fade-en-cours").stop();
		 jQuery('#page4').hide(); 
		 jQuery('#page3').hide(); 
		 jQuery('#page1').hide(); 
		 jQuery('#page2').fadeIn(2000); 
	 }); 
	 jQuery('#tab2').mouseover(function() { 
		 jQuery(".fade-en-cours").stop();
		 jQuery('#page4').hide(); 
		 jQuery('#page1').hide(); 
		 jQuery('#page2').hide(); 
		 jQuery('#page3').fadeIn(2000); 
	 }); 
	 jQuery('#tab3').mouseover(function() { 
		 jQuery(".fade-en-cours").stop();
		 jQuery('#page3').hide(); 
		 jQuery('#page1').hide(); 
		 jQuery('#page2').hide(); 
		 jQuery('#page4').fadeIn(2000);  
	 }); 
	 jQuery('#tab0').mouseover(function() { 
		 jQuery(".fade-en-cours").stop();
		 jQuery('#page4').hide(); 
		 jQuery('#page3').hide(); 
		 jQuery('#page2').hide(); 
		 jQuery('#page1').fadeIn(2000); 
	 }); 
});

Modifié par dummycreation (21 Apr 2010 - 17:50)
Il suffit d'utiliser stop avec les 2 arguments true, true

jQuery(document).ready(function() {  
 
     jQuery('#tab1').mouseover(function() { 
         jQuery('#page4').hide();  
         jQuery('#page3').hide();  
         jQuery('#page1').hide();  
         jQuery('#page2').stop(true,true).fadeIn(2000);  
     });  
     jQuery('#tab2').mouseover(function() {  
         jQuery('#page4').hide();  
         jQuery('#page1').hide();  
         jQuery('#page2').hide();  
         jQuery('#page3').stop(true,true).fadeIn(2000);  
     });  
     jQuery('#tab3').mouseover(function() {  
         jQuery('#page3').hide();  
         jQuery('#page1').hide();  
         jQuery('#page2').hide();  
         jQuery('#page4').stop(true,true).fadeIn(2000);   
     });  
     jQuery('#tab0').mouseover(function() {  
         jQuery('#page4').hide();  
         jQuery('#page3').hide();  
         jQuery('#page2').hide();  
         jQuery('#page1').stop(true,true).fadeIn(2000);  
     });  
});
Sujet clos
Aller à