2

所以我只是每隔一小段时间切换和删除一些类 - 我对 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); 
}

然而，似乎有很多重复——有没有更好的方法来做到这一点？

4

5 回答 5

0

您可以使用简单的迭代来干燥您的 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.
于 2012-11-21T21:13:10.527 回答
0

对于 jQuery 动画方法，使用该delay方法可以正常工作。对于其他 jQuery 方法，我可能会推荐jquery.wait，它的工作原理与所有 jQuery 方法类似，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');
}
于 2012-11-22T05:09:19.860 回答
0 
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");

    }
}
于 2012-11-21T21:13:47.903 回答
0

如果您对蓝/黑颜色交换没有限制，我会使用 jQuerys pulsate（可以在此处找到文档）效果：

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 和适当的背景颜色为您的价格表添加底色。

于 2012-11-21T21:26:47.290 回答
0

您可以查看 jQuery 的动画和延迟功能的组合来实现您的结果。

jQuery UI 插件（您可能已经在使用？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和3id 元素上播放动画。

于 2012-11-21T21:33:01.800 回答