2014-11-21 7 views
0

JQuery를 사용하여 자체 DIV의 여러 요소를 자체 "지연"및 "페이드 인"값으로 단계적으로 만들려고합니다. 나는 This Fiddle에서 일하고 있지만, 이것이 가장 효율적인 방법입니까? 라이브 사이트에서 지연 및 페이드 인 값에 대해 PHP를 통해 임의의 숫자를 전달합니다. 여기 무작위 지연이있는 각각의 JQuery로 여러 요소가 페이드 인

은 JQuery와 있습니다 :

$(".fade1").hide(0).delay(500).fadeIn(500); 
$(".fade2").hide(0).delay(800).fadeIn(1750); 
$(".fade3").hide(0).delay(1000).fadeIn(3500); 
$(".fade4").hide(0).delay(1500).fadeIn(5000); 
+0

부모 컨테이너'.fade_container'. 그 아이들을 지나는 고리는 어떨까요? 그런 다음'.delay'와'.fadein'에서 간격이 증가하는 각각의 .fadeIn을 바인딩 할 수 있습니다. – Xenyal

답변

1

당신은 작은 jQuery 플러그인 스크립트 아래와 같이 쓸 수 있습니다 : 당신이 요소의 많은 경우 그것은 비효율적 인 것

$.fn.hideNFadeIn = function (opts) { 
    var options = opts; 
    this.each(function (i) { 
     $(this).hide(0).delay(options.delay[i]).fadeIn(options.fadeIn[i]); 
    }); 
}; 
$('.fade1, .fade2, .fade3, .fade4').hideNFadeIn({ 
    delay: [500, 800, 1000, 1500], 
    fadeIn: [500, 1750, 3500, 5000] 
}); 

Demo

+0

좋은 생각! 나는 원래 바이올린을 이것으로 업데이트했다. – MatthewSchenker