JQuery последовательность анимации FadeIn - PullRequest
Новая
       17

JQuery последовательность анимации FadeIn

0 голосов
/ 21 декабря 2011

Я использую библиотеку 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 всплывают только один раз.

1 Ответ

0 голосов
/ 21 декабря 2011

Я бы попробовал сделать что-то подобное для последовательной анимации: 

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, и он работает в обоих местах.

...