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'));

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

3 个答案: