요소가 사라질 때 요소가 사라질 때로드 GIF를 추가합니다.

Question

사용자가 다음 화살표 (.paging-navigation a)를 클릭하면 현재 블로그 게시물 세트가 사라지고 새 세트가 사라질 수 있도록이 페이지 매김을 설정했습니다. 새 설정이로드되는 동안 지연이 발생하고 사용자가 아무 것도 잘못 알 수 없도록로드하는 gif를 삽입하려고합니다. 여기

내가 그것을 설정 한 방법입니다 : 여기

$('#article-list').on('click', '.paging-navigation a', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $('#news').offset().top - 60 
    }, 500); 
    $('#article-list').fadeOut(500, function(){ 

     // I would like to put in the animation gif here 
      and fade it away when the new set of posts 
      fade in. 

     $(this).load(link + ' #article-list', function() { 
      $(this).find('#article-list > *').unwrap().end().fadeIn(500); 
     }); 
    }); 
}); 

는 HTML입니다 :

<div id="news"> 
    <div id="article-list"> 
     <img class="loading-list" src="loading.gif" style="display:none"> 

     (blog posts here) 

     <div class="paging-navigation"> 
      <div class="nav-previous"> 
       <a href="#">Prev</a> 
      </div> 
      <div class="nav-next"> 
       <a href="#">Next</a> 
      </div> 
     </div> 

    </div> 
</div> 

나는이 같은 .loading-list IMG 표시/숨기기를 시도했지만 작동하지 않았다 :

$('#article-list').on('click', '.paging-navigation a', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $('#news').offset().top - 60 
    }, 500); 
    $('#article-list').fadeOut(500, function(){ 
     $('.loading-list').show();         <// added 
     $(this).load(link + ' #article-list', function() { 
      $(this).find('#article-list > *').unwrap().end().fadeIn(500); 
     }); 
     $('.loading-list').hide();         <// added 
    }); 
}); 

누군가 나를 도울 수 있습니까?

또한 게시물의 첫 번째 세트가 사라지고 새 게시물이로드 될 준비가되는 동안 콘테이너 div의 높이가 콘텐츠 부족을 설명하기 위해 갑자기 줄어들고 새 게시물이 올 때 다시 높이가 이동합니다. div 전환의 높이를 더 부드럽게 만들 수있는 방법이 있습니까?

편집 : #article-list

#news #article-list { 
    overflow: hidden; 
    text-align: center; 
} 

Answer 1

<div id="news"> 
<img class="loading-list" src="loading.gif" style="display:none"> 
    <div id="article-list"> 


     (blog posts here) 

     <div class="paging-navigation"> 
      <div class="nav-previous"> 
       <a href="#">Prev</a> 
      </div> 
      <div class="nav-next"> 
       <a href="#">Next</a> 
      </div> 
     </div> 

    </div> 
</div> 

에 대한 CSS 스크립트 :

이

$('#article-list').on('click', '.paging-navigation a', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $('#news').offset().top - 60 
    }, 500); 
    $('#article-list').fadeOut(500, function(){ 
     $('.loading-list')[0].show();         <// added 
     $(this).load(link + ' #article-list', function() { 
      $(this).find('#article-list > *').unwrap().end().fadeIn(500); 
     }); 
     $('.loading-list')[0].hide();         <// added 
    }); 
}); 

이 아니라 당신이 스텝 업 이미지를 제거로 작동합니다, 당신은 부모를 숨기고 아이를 유지하지 못할 명백한.

편집 : 클래스를 선택하면 노드 목록이 반환되므로 요소를 지정하거나 class 대신 -list로 -list를로드해야합니다.

편집 (2)

사실 나는 소스 코드에 어떤 문제가 있는지 잘 모릅니다 만, JQuery와 숨기기과 나를 위해 쇼 나던 작동합니다.

그러나이 일 :

document.getElementsByClassName("loading-list")[0].style.display="block"; 

그래서 새로운 코드는 다음과 같아야합니다

$('#article-list').on('click', '.paging-navigation a', function(e){ 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $('#news').offset().top - 60 
    }, 500); 
    $('#article-list').fadeOut(500, function(){ 
     document.getElementsByClassName("loading-list")[0].style.display="block";;         <// added 
     $(this).load(link + ' #article-list', function() { 
      $(this).find('#article-list > *').unwrap().end().fadeIn(500); 
     }); 
     document.getElementsByClassName("loading-list")[0].style.display="none";;         <// added 
    }); 
}); 

Answer 2

편집,

업데이트 시도

V3

$('#article-list') 
.on('click', '.paging-navigation a', function (e) { 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $('#news').offset().top - 60 
    }, 500, "linear"); 
    $('#article-list *:not(img.loading-list)') 
    .fadeOut({ 
     duration: 500, 
     start: function (promise) { 
      $("img.loading-list") 
       .fadeIn(0); 
     } 
    }).promise().done(function(el) { 
     $(el).siblings("img.loading-list") 
     .fadeOut(1500, function() { 
      // substituted `e.target` for `this` 
      $(e.target).load(link + ' #article-list', function() { 
      $('#article-list *:not(img.loading-list)') 
       .fadeIn(500); 
      }); 
     }) 
    }); 
}); 

jsfiddle http://jsfiddle.net/guest271314/7mvrdzcj/

Answer 3

당신은 .load()의 콜백 함수로 $('.loading-list').hide()를 이동해야합니다. 내용이로드가 완료 될 때

$('#article-list').on('click', '.paging-navigation a', function (e) { 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $('#news').offset().top - 60 
    }, 500); 
    $('#article-list').fadeOut(500, function() { 
     $('.loading-list').show(); 
     $(this).load(link + ' #article-list', function() { 
      $('.loading-list').hide(); //moved here 
      $(this).find('#article-list > *').unwrap().end().fadeIn(500); 
     }); 
     //from here 
    }); 
}); 

그래서 당신은 GIF를 보여, 새로운 내용을로드 시작, 다음, 콜백 함수는 GIF를 숨기고 새로운 내용에 페이드.

높이의 경우 CSS transition을 사용하여 변경 사항을 부드럽게 처리 할 수 ​​있습니다. 그러나 height: auto 사이로 전환 할 수 없기 때문에 해결 방법이 필요합니다. 뭔가 같이 :

CSS :

#article-list { 
    min-height: 0; 
    -webkit-transition: min-height 0.5s; 
    transition: min-height 0.5s; 
} 

JS (jQuery를) : 그래서 바로 당신이 이전 내용을 페이드 아웃 시작하기 전에

$('#article-list').on('click', '.paging-navigation a', function (e) { 
    e.preventDefault(); 
    var link = $(this).attr('href'); 
    $('html, body').animate({ 
     scrollTop: $('#news').offset().top - 60 
    }, 500); 
    $('#article-list').css('min-height', 400); //change min-height here 
    $('#article-list').fadeOut(500, function() { 
     $('.loading-list').show(); 
     $(this).load(link + ' #article-list', function() { 
      $('.loading-list').hide(); 
      $(this).find('#article-list > *').unwrap().end().fadeIn(500); 
      $('#article-list').css('min-height', 0); //change min-height here 
     }); 
    }); 
}); 

, 당신은 min-height 설정, 그래서 DIV 아무튼 ' 붕괴. 새로운 콘텐츠가 페이드 인하기 시작한 직후에 div의 높이가 이미 채워지면 min-height을 다시 0으로 설정하여 div가 새 콘텐츠의 높이로 부드럽게 축소되도록합니다.

이 코드를 테스트하기가 다소 어려워서 문제가 발생하면 알려주세요.