JQuery最佳實踐：按順序在元素之間運行效果

有沒有比這更好的方法？請讓我向你學習。 TIAJQuery最佳實踐：按順序在元素之間運行效果

$('ul').children(':first-child').delay('fast').fadeToggle('fast', function() { 
    $(this).delay().fadeToggle(function() { 
     $(this).next().delay().fadeToggle(function() { 
      $(this).delay().fadeToggle(function() { 
       $(this).next().delay().fadeToggle(function() { 
        $(this).delay().fadeToggle(function() { 
         $(this).closest('#welcome').next().toggle(); 
         $(this).closest('#welcome').slideToggle(function() { 
          $(this).remove(); 
          $('body').css('overflow', 'auto'); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
});

http://jsfiddle.net/rKVkd/

來源

2013-09-23 ItangSanjana

您是否嘗試過使用。每（），然後通過每個動畫通過增加延遲迭代。 –

@Stefan Dunn，謝謝我會試試這個，並在這裏回報.. – ItangSanjana

只需使用'.delay（i * 100）'（其中'i'是一個光標）即可獲得所需的效果。 – soyuka

試試這個，你可以申請flash_show任何列表來實現同樣的效果。當演出結束後，一般回調會被調用。

Demo

function flash_show(cb) { 
    var $e = $(this).next(); 

    $(this).fadeToggle().delay().fadeToggle('fast', function() { 
     $e.size() == 0 ? cb.call(this) : flash_show.call($e, cb);  
    }) 
} 

flash_show.call($('ul li')[0], function() { 
    $(this).closest('#welcome').next().toggle(); 
    $(this).closest('#welcome').slideToggle(function() { 
     $(this).remove(); 
     $('body').css('overflow', 'auto'); 
    }); 
})

來源

2013-09-23 10:10:14 ledzep2

真棒。從你身上學到很多。謝謝！ – ItangSanjana

嘗試

$('#welcome, #content').height($(window).height()); 

function toggleUl($ul, complete) { 
    var $li = $ul.find('.current').removeClass('current').next(); 
    if (!$li.length) { 
     $li = $ul.children().first(); 
    } 
    $li.addClass('current') 
    $li.fadeIn('fast', function() { 
     $(this).delay(250).fadeOut('fast', function() { 
      var $this = $(this); 
      if ($this.is(':last-child')) { 
       complete(); 
      } else { 
       toggleUl($ul, complete); 
      } 
     }) 
    }); 
} 

toggleUl($('ul'), function() { 
    $('#welcome').next().toggle(); 
    $('#welcome').slideToggle(function() { 
     $(this).remove(); 
     $('body').css('overflow', 'auto'); 
    }); 
});

演示：Fiddle

來源

2013-09-23 10:09:19

真棒，謝謝.. – ItangSanjana

JQuery最佳實踐：按順序在元素之間運行效果

回答

相關問題