Jquery 选项卡闪烁颜色并淡出另一种颜色

Question

好的，我的问题是我有 JQuery 个选项卡。并且每个内容都动态变化。我希望那些更改为亮红色然后褪色为另一种颜色的选项卡。但是在焦点上变回原来的颜色。

有没有简单的方法来做到这一点？

这是一个功能示例...请记住，每个选项卡面板上都会有一个数据表。我让每个面板和选项卡都具有唯一 ID，这是一种更好的方式，因为这种方式可能会被破坏。

当您单击第一个按钮时，它将添加选项卡...第二个按钮是我想要激活彩色选项卡闪烁的地方，就好像它是触发它的事件一样...

请不要违反标签 ID 的约定 #ui-id-1

这不是我引用选项卡的方式

Answer 1

我不确定这是否是您要查找的内容，但这会突出显示活动选项卡。

您可以将它添加到您的 .click(...) 事件处理程序（在您的 fiddle 中显示警报之前）以查看它是否有效。

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

如果您想突出显示任何选项卡（不仅仅是活动选项卡），您可以改用此选择器（根据需要替换回调中的 ui-id-1）

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

要将颜色更改为 'yellow' 以外的颜色，您可以这样调用效果

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

根据评论更新如下

如果需要，您可以在 'active' 选项（创建时间）之后添加高亮选项卡激活效果，如下所示：

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

再更新一次

如果您不想简单地 'highlight' 选项卡而是永久更改它的颜色，请改用 .animate(...)

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

然后，要恢复到原始颜色（当激活或 clicked 开启时），您可以：

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

Jquery Tabs Flash Color and Fade out to another color