jquery - 许多使用相同动画的 div 试图将它们包含在一行中

Question

我有多个动画做同样的事情有没有一种方法可以将它们包含在一个堆中。

           $('.info_box_title').animate({opacity: 1},'500');
           $('.info_box_status').animate({opacity: 1},'500');
           $('.info_box_about').animate({opacity: 1},'500');

就像是

$('.info_box_title','.info_box_status','.info_box_about').animate({opacity: 1},'500');

Answer 1

你是如此接近！只需将选择器（逗号分隔）都放在两个引号内：

$('.info_box_title, .info_box_status, .info_box_about').animate({opacity: 1},'500');

供参考：http ://api.jquery.com/multiple-selector/

Answer 2

你可以使用这个选择器

$('.info_box_title, .info_box_status, .info_box_about')

或者

$("div[class*=' info_box-']") // It selects all divs which contains 'info_box' text in their class name

或者

$("div[class^='info_box-']") // It selects all divs whose class name starts with'info_box' text.

Answer 3

我会创建一个函数，以便您可以在需要时在其他人身上使用它：

function animateOpacity($item,$value,timing){
    $item.animate({opacity:$value},timing);
}

animateOpacity($('.info_box_title'),1,500);
animateOpacity($('.info_box_status'),1,500);
animateOpacity($('.info_box_about'),1,500);

这使您可以将它重用于很多事情……即使具有不同的不透明度和时间值。或者，如果您不需要它那么可扩展：

function animateOpacity($item){
    $item.animate({opacity:1},500);
}

animateOpacity($('.info_box_title'));
animateOpacity($('.info_box_status'));
animateOpacity($('.info_box_about'));