Question

所以我只是在一小段时间内切换和删除一些类 - 我对JS和JQuery很新，但我已经完成了这个，它有效：

function priceTable() {
    setTimeout(function(){$("#price-table-1").toggleClass("price-table-highlight");  },1000);
    setTimeout(function(){$("#price-table-1").removeClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").toggleClass("price-table-highlight");  },2000);
    setTimeout(function(){$("#price-table-2").removeClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").toggleClass("price-table-highlight");  },3000);
    setTimeout(function(){$("#price-table-3").removeClass("price-table-highlight");  },4000); 
}

然而，似乎有很多重复 - 有更好的方法吗？

Answer 1

您可以使用简单的迭代来识别ID标识符。

timer = 1000;
for( pricetableindex = 1; pricetableindex <=3; pricetableindex++ ){
    .....unction(){$("#price-table-"+pricetableindex).toggle...  ), timer);
    .....unction(){$("#price-table-"+pricetableindex).remove...  ), timer+=1000);

这是访问对象成员，点语法以及数组表示法的重复语法的主要卖点。

obj.member1 syntax does not allow this kind of manipulation, while 
obj["member1"] does.

Answer 2

function priceTable() {
    var table_count = 3;

    for(var i = 0; i < table_count; i++) {
        // jQuery
        $('#price-table-' + i).delay(1000)
                              .animate({ "background-color": "blue" })
                              .delay(1000)
                              .animate({ "background-color": "black" });

        // jQuery UI (http://api.jqueryui.com/addClass/)
        $('#price-table-' + i).delay(1000)
                              .addClass("price-table-highlight", 0) // 0 is important
                              .delay(1000)
                              .removeClass("price-table-highlight");

    }
}

Answer 3

如果您对蓝/黑色交换没有限制，我会使用jQuerys pulsate（doc可以找到here）效果：

function priceTable() {
  $("#price-table-1").effect("pulsate", { times:3 }, 2000);
  $("#price-table-2").effect("pulsate", { times:3 }, 2000);
  $("#price-table-3").effect("pulsate", { times:3 }, 2000);
}

唯一的缺点是：它会使整个元素产生脉动。所以我建议不要像上面那样使用上面的内容（因为#price-tables中的所有文本也会淡入和出去）。
脉动的作用是，它会使它所应用的元素的不透明度产生脉动。因此，您可以使用空div和适当的背景颜色来为您的价格表提供支持。

Answer 4

您可以查看jQuery animate和delay函数的组合以获得结果。

jQuery UI plug-in（您可能已经在使用？toggleClass是他们的方法之一，但我收集它存在于jQuery核心中并在jQuery-UI中扩展）也可以为整个类设置动画。它会是这样的：

function priceTable() {
    $("#price-table-1").toggleClass("price-table-highlight",1).delay(1000).toggleClass("price-table-highlight", 1);
}

不严格“更高效”，因为它需要一个完整的额外库，但肯定更少的代码。我不知道您是否能够通过.delay调用启动动画队列，或者您是否必须设置超时功能以开始price-table-2和3上的动画id元素。

Answer 5

对于jQuery动画方法，使用delay方法可以正常工作。对于其他jQuery方法，我可以推荐jquery.wait，它与delay的工作方式类似，但适用于所有jQuery方法。然后你的代码变成

function priceTable() {
  $('#price-table-1').wait(1000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(2000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
  $('#price-table-2').wait(3000).toggleClass('price-table-highlight').wait(1000).removeClass('price-table-highlight');
}

JQuery setTimeout - 更有效的方法吗？

5 个答案: