각 요소에서 페이드 - 하나씩

각 요소에서 페이드 - 하나씩

현재 가지고 있는 콘텐츠를 표시하기 위해 JSON 페이지를 로드하는 방법을 찾고 있습니다.하지만 나는 각 요소에서 하나씩 사라지려 하고 있다.그것을 하는 방법을 아는 사람이 있나요?

각 요소에서 약간의 지연으로 페이드하시겠습니까?

다음은 제 코드의 예입니다.jquery 프레임워크를 사용하고 있습니다.

코드: http://pastie.org/343896

다음과 같은 스판 요소가 배열되어 있다고 가정합니다.

$("span").each(function(index) {
    $(this).delay(400*index).fadeIn(300);
});

(빠른 메모:.delay 메서드를 사용하려면 jQuery 1.4 이상이 필요하다고 생각합니다.)

이것은 기본적으로 일정 시간 대기하고 각 요소를 페이드 인합니다.이는 대기 시간에 요소의 인덱스를 곱하기 때문에 작동합니다.어레이를 통해 반복할 경우 지연은 다음과 같습니다.

• 지연 400 * 0 (지연 없음, 첫 번째 요소에 필요한 페이드인)
• 지연 400 * 1
• 지연 400 × 2
• 지연 400 × 3

이것에 의해, 「하나씩 차례로」페이드 인의 효과가 좋아집니다.slideDown에서도 사용할 수 있습니다.

페이드 기능을 설정하여 "다음"을 트리거할 수 있습니다.

 $("div#foo").fadeIn("fast",function(){
      $("div#bar").fadeIn("fast", function(){
           // etc.
      });
   });

그러나 타이머는 더 나은 시스템일 수도 있고 모든 시스템을 가져와 배열에 배치한 다음 지연을 두고 하나씩 꺼내고 한 번에 하나씩 페이딩하는 기능일 수도 있습니다.

이건 어때?

jQuery.fn.fadeDelay = function() {
 delay = 0;
 return this.each(function() {
  $(this).delay(delay).fadeIn(350);
  delay += 50;
 });
};

다음과 같은 것이 필요할 것입니다.

var elementArray = yourAjaxRequestReturningSomethingEdibleByJQuery();
fadeInNextElement(elementArray);


function fadeInNextElement(elementArray)
{
    if (elementArray.length > 0)
    {
        var element = elementArray.pop();
        $(element).fadeIn('normal', function()
        {
             fadeInNextElement(elementArray);
        }
    }
}

주의:테스트해 본 적은 없지만, 안 되더라도 아이디어를 얻어 쉽게 고쳐야 합니다.

그나저나 타이머를 사용하는 것은 반대입니다.타이머를 사용하면 요소가 차례로 페이드인 되는 것을 보증할 수 없습니다.또, 1개의 요소의 페이드인이 개시되는 것은, 앞의 요소가 종료했을 경우 뿐입니다.

이론적으로는 가능하지만, 어떠한 이유로 「체인」을 정지할 필요가 있거나, 퇴색하는 애니메이션이 제시간에 종료하지 못하는 경우가 있습니다.그냥 제대로 된 체인을 사용하세요.

setTimeout()(표준 JS 함수)에서 jQuery fadeIn()을 확인합니다.이 사이트 http://www.realstorage.ca/에서 제가 한 일을 확인하실 수 있습니다.그냥 숨어서 보여주면 돼. 루프에 빠질 수 있어.

위의 답변에서 저는 이런 것을 생각해 냈습니다.

HTML

<div id="errorMessage" class="d-none" ></div>

자바스크립트

var vehicle = {

error: (error, message) => {
    if(error){
        vehicle.popUp(message, 'bg-danger');
    }else{
        vehicle.popUp(message, 'bg-success');
    }
},
popUp: (array, bgColor) => {

    var errorBox = $('#errorMessage');

    errorBox.removeClass('d-none');
    $.each(array, function(i,e){
        i=i+1;
        var messageBox = '<div id="'+i+'" class="'+bgColor+' text-white">'+e+'</div>';
        $(messageBox).appendTo(errorBox).delay(100*i+0).slideDown(100*i+0,function(){
            $('#'+i).delay(1000*i+0).slideUp(400*i+0, function(){
                $('#'+i).remove();    
            });
        });
    });               
},

}

언급URL : https://stackoverflow.com/questions/379900/fade-in-each-element-one-after-another