Attendre l'exécution de toute l'action de l'évènement

bruce-willis · 02/04/2010, 13h21

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

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
16
17
18
19
20
21
22
23
24
25
26
         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

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
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
        //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

**randriano** · 06/04/2010, 15h56

Je crois qu'avec un effet slide, pas besoin de UI Effects, donner un paramètre à show() suffit

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
16
17
18
19
20
21
22
23
24
25
26
27
28
jQuery(document).ready(function() { 
             var options = {}; 
 
             jQuery('#tab1').mouseover(function() { 
                 jQuery('#page4').hide(); 
                 jQuery('#page3').hide(); 
                 jQuery('#page1').hide(); 
                 jQuery('#page2').show("slow"); 
             }); 
             jQuery('#tab2').mouseover(function() { 
                 jQuery('#page4').hide(); 
                 jQuery('#page1').hide(); 
                 jQuery('#page2').hide(); 
                 jQuery('#page3').show("slow"); 
             }); 
             jQuery('#tab3').mouseover(function() { 
                 jQuery('#page3').hide(); 
                 jQuery('#page1').hide(); 
                 jQuery('#page2').hide(); 
                 jQuery('#page4').show("slow"); 
             }); 
             jQuery('#tab0').mouseleave(function() { 
                 jQuery('#page4').hide(); 
                 jQuery('#page3').hide(); 
                 jQuery('#page2').hide(); 
                 jQuery('#page1').show("slow"); 
             }); 
         });

Là il y aura encore un soucis avec le fait que l'exécution de l'action d'un évènement n'est pas encore terminé, un autre est déclenché
Je cherche

**randriano** · 07/04/2010, 08h17

Pour éviter que tout s'affiche (sans éviter que 2 ou tout soit en show), il suffit de mettre les tab1,... , tab4 dans un DIV à width & height fixe ainsi qu'avec overflow:hidden

" Plus simple que ça, tu meurs "

bruce-willis · 07/04/2010, 12h21

Merci pour le truc de overflow:hidden et .show("slow")
Pour ce dernier, intéressant mais je cherche à utiliser d'autre effet, même le slide je n'aime pas mais c'est pour le test
Un effet de fondu lors de la transition !!!

[Edit 2010-04-20]
J'ai amélioré en utilisation "position:absolute;top:105px;left:5px;" pour les pages
Car si ce sont des div simples, ce sera toujours le div le plus haut qui s'affiche si on passe rapidement sur les onglets

Sincèrement, j'aimerais comprendre le truc de UI Tabs qui évite qu'un autre tab s'affiche au lieu du voulu si on déplace rapidement les souris sur les onglets?

[Edit 2010-04-22]
La solution finale.

Attendre l'exécution de toute l'action de l'évènement

jQuery

Discussions similaires

Partager

Partager