Question

我正在使用jQuery，fancybox和vgrid库（http://blog.xlune.com/2009/09/vgrid/demo007.html）

我想实现一些连续的fadeIn动画。这是我的代码执行此操作的一部分：

  array2=[]
  for(item in data_array)
    {

      _item= $(data_array[item]).hide()
      vg.prepend(_item);
      array2.push(_item)
    }

   $('a[rel=fancybox]').fancybox(
    {'transitionIn':'elastic', 'transitionOut':'elastic', 'titlePosition':'inside', }   
    );    
  ctr=0;
  seqAnim=function()
  {
    alert('seqAnim '+ctr+', '+array2.length+" , "+array2[ctr]);
    if(ctr!=array2.length)
    {
      array2[ctr].show();
      alert('fading in');
      array2[ctr++].fadeIn(300, seqAnim);
      alert('done fading in');
    }
    else
    {
//         $('a[rel=fancybox]').fancybox(
//  {'transitionIn':'elastic', 'transitionOut':'elastic', 'titlePosition':'inside', }   
//  );    
    alert('all done');
    }
  }

  vg.vgrefresh(null, null, null, seqAnim)

这可能不是最好的方式，但它正在发挥作用。至少在FF和Chrome中。但是在 ie9 中，它无效。我一直试图用alert调用来调试它，但我找不到错误。 seqAnim功能中的提醒呼叫仅弹出一次。

Answer 1

我会尝试为顺序动画做这样的事情：

var data_array = ["#item1", "#item2", "#item3"],
    //instead of a loop, join the selectors together
    //and wrap them at the same time.
    $items = $(data_array.join(',')).hide(),
    animLen = 1000;

$('a[rel=fancybox]').fancybox(
    {'transitionIn':'elastic', 'transitionOut':'elastic', 'titlePosition':'inside', }   
);

$items.each(function(i, item) {
    var $item = $(item);

    $item.delay(i * animLen).queue('fadeInQueue', function(next) {
        $(this).fadeIn(animLen);
        next();
    }).dequeue('fadeInQueue');
});

vg.vgrefresh(null, null, null, seqAnim);

修改

这是jsFiddle的工作原理。我已经在IE9和FF8中测试了它，它在两个地方都有效。

jquery fadeIn动画序列

1 个答案: