Différentes animations pour les onglets de l'interface utilisateur JQuery

Question

J'utilise jquery ui tabs widget. Je n'ai pas utilisé un thème jquery car je préfère faire mon propre css et d'autres choses. Je l'ai fonctionné, mais ce que je voudrais est d'avoir un effet d'animation différent pour le contenu de l'onglet quand un onglet différent est cliqué. Ce que je voudrais, c'est que le nouveau contenu de l'onglet glisse de la gauche.

Au moment j'ai:

$("#tabs").tabs({ fx: {slide: 'slow' } }); }); 

Je sais que le code ci-dessus est juste glisser et non glisser vers la gauche, mais il n'a même pas fait une diapositive! J'ai téléchargé les effets de diapositives dans le cadre de mon téléchargement d'interface utilisateur personnalisé. Je ne sais pas pourquoi ça ne marche pas! Est-ce un peu de css que je manque ?! Je ne sais pas!!!

Answer 1

Je ne sais pas quelle version que vous utilisez, mais avec 1.7.1 voici comment faire:

$("#tabs").tabs({ 
    fx: { height: 'toggle', duration: 'slow' } 
}); 

Answer 2

Je sais que cette question est plus d'un an, mais vous pouvez essayer celui-ci:

Si vous utilisez 'width', jQuery créera l'effet en utilisant la propriété width, d'où une animation horizontale.

$('#tabs').tabs(
{ 
    fx: { width: 'toggle', duration: '500' } 
}); 

vous pouvez également utiliser la hauteur et la largeur ensemble pour un effet diagonal.

aussi essayer « cacher » et « show » mots-clés au lieu de « basculer », ils sont trop cool :)

Answer 3

Essayez celui-ci: http://www.eduteka.org/ajax/tabs3/ pour plus d'options

Answer 4

Juste pour mettre à jour la réponse à cette question, en utilisant la version 1.10 de jquery ui, j'ai utilisé l'option 'show' pour appliquer un effet de transition sur les onglets. Il est un exemple dans la documentation ui jquery ici:

http://api.jqueryui.com/tabs/#option-show

$(".selector").tabs({ show: { effect: "blind", duration: 800 } });