Jquery Tabs Flash Couleur et fondu à une autre couleur

Question

Ok mon problème est que j'ai JQuery Tabs. et le contenu de chacun change dynamiquement. Je voudrais que l'onglet sur ceux qui changent pour passer à une couleur rouge vif puis fondu à une autre couleur. Mais sur la mise au point revenir à la couleur d'origine.

Y at-il un moyen facile de faire cela?

Ceci est un exemple fonctionnel ... rappelez-vous qu'il y aura un datatable sur chaque panneau à onglets. J'ai chaque panneau et les onglets avec des ID uniques un meilleur moyen que parce que de cette façon peut être brisé.

lorsque vous cliquez sur le premier bouton, il ajoutera les onglets ... le deuxième bouton est l'endroit où je veux activer le flash onglet de couleur comme si elle était l'événement qui a déclenché ...

S'il vous plaît ne pas partir de la convention de l'onglet id #ui-id-1

ce n'est pas comment je référencent les onglets

http://jsfiddle.net/alfredmey/8ny27Ljf/2/

Answer 1

Je ne suis pas sûr que ce soit ce que vous cherchez, mais cela mettra en évidence les ac onglet Tive.

Vous pouvez l'ajouter à votre gestionnaire d'événements .click(...) (avant que l'alerte n'apparaisse dans votre violon) pour que cela fonctionne.

$("#search-tabs ul li.ui-state-active").effect('highlight', 2000); 

Si vous souhaitez mettre en évidence un onglet (et pas seulement le un actif), vous pouvez utiliser ce sélecteur à la place (remplacement ui-id-1 sur le rappel au besoin)

$("#search-tabs ul li[aria-labelledby='ui-id-1'").effect('highlight', 2000); 

Pour changer la couleur autre chose vous pouvez appeler que « jaune » l'effet comme celui-ci

$(...).effect('highlight', {color: '#aa0000'}, 2000);

Mise à jour ci-dessous bas ed des commentaires

Si vous le souhaitez, vous pouvez ajouter l'effet de surbrillance sur l'activation de l'onglet en ajoutant juste après l'option « active » (heure de création) comme ceci:

"activate": function(event, ui) { 
      $(ui.newTab[0]).effect('highlight', {color: 'yellow', }, 1000); 

Voir updated fiddle

Une mise à jour plus

Si vous ne voulez pas simplement «mettre en relief l'onglet mais définitivement changer la couleur de celui-ci, utilisez .animate(...) à la place

$(<selector>).animate({ 
     backgroundColor: "#aa0000", 
     color: "#fff" }, 1000); 

Ensuite, pour revenir aux couleurs d'origine (lorsqu'elle est active ou clicked), vous pouvez:

$(<selector>).animate({ 
      backgroundColor: "#fff", 
      color: "#aa0000" }, 1000);