Onglets jquery-ui avec fadeIn?

J'ai un petit widget JQuery Tabs dans une barre latérale qui s'estompe lorsque la page se charge, attirant discrètement l'attention sur lui-même et le contenu intéressant derrière les onglets.Onglets jquery-ui avec fadeIn?

Pour tirer parti de cet effet, il peut être intéressant que les onglets individuels se dégradent les uns après les autres.

Cela peut-il être fait, et si oui, comment?

Source

2010-07-07 Ken

Étant donné que les onglets ne sont que des éléments li, pouvez-vous mettre tous à display:none lorsque vous chargez la page, puis utilisez Fade (http://jqueryui.com/demos/effect/) effet de JQuery à disparaître individuellement chaque élément li en?

Source

2010-07-07 22:15:57 amfeng

La simple énumération des appels à fadeIn ("lent") sur chaque élément entraîne un fondu enchaîné en même temps. Je ne sais pas comment contrôler le timing afin de retarder le fondu d'un élément jusqu'à ce que le précédent soit complet. – Ken

Une manière peut-être désordonnée de le faire pourrait être d'utiliser la fonction de rappel de fadeIn et d'utiliser des fadeIn imbriqués. Le callback n'est pas appelé tant que l'animation n'est pas terminée, donc chaque fadeIn successif ne sera pas appelé tant que le précédent n'est pas terminé. Une autre option (peut-être malpropre) est d'utiliser une sorte de Javascript sleep() timer. – amfeng

L'idée de rappel semble bonne. Sale d'une manière élégante. Je vais essayer demain - il est 1 heure ici. Merci! – Ken

J'ai trouvé une discussion sur mon problème ici: http://p.karageorgakis.com/blog/jquery_simulating_a_delay_function_between_fade_in_out_effects/

Parmi les solutions proposées, le javascript setTimeout() forgées de toutes pièces les autres solutions, au moins pour mon but.

Voici le code que je suis allé avec:

$(function() { 
    $("#tabs").tabs(); 
    $("#tabs").fadeIn(500); 
    $("#li1").fadeIn(500); 
    setTimeout('$("#li2").fadeIn(500)', 300); 
    setTimeout('$("#li3").fadeIn(500)', 600); 
    setTimeout('$("#li4").fadeIn(500)', 900); 
});

Le widget onglets se ainsi que les éléments de la liste sont tous à display:none au départ.

Il y avait un autre problème que je vais partager, car il m'a conduit à la solution de fondu agréable.

Ce widget devait flotter à gauche d'un autre contenu, mais devait également être masqué jusqu'à ce qu'il soit entièrement instancié par JQuery. fadeIn() ne fonctionnait pas avec un élément défini sur visibility:hidden; il devait être display:none, mais cela a provoqué le widget pour déplacer le contenu environnant et apparaître brusquement, ce qui semblait vraiment horrible. S'affaiblir était un moyen d'atténuer cela.

Rétrospectivement, peut-être que je pourrais bloquer les dimensions (connues) du widget onglets, de toute façon j'aime le résultat que j'ai obtenu!

Source

2010-07-08 19:59:51 Ken

Cela fera quand sélectionner l'onglet disparaît, et quand il est affiché apparaissent!

$('.tabs').tabs({ 
     select: function(event, ui) { 
      $(ui.panel).animate({opacity:0.1}); 
     }, 
     show: function(event, ui) { 
      $(ui.panel).animate({opacity:1.0},1000); 
     } 
});

Source

2012-06-23 02:07:48

TRÈS BEAU CODE HOMME SON FONCTIONNEMENT TRÈS BON POUR L'EFFET FADEIN – Rami

Onglets jquery-ui avec fadeIn?

Répondre

Questions connexes