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

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:

---

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:

---

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

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

Code:

---

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

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 "

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.