두 번째 클릭시 변수 변경 사용

Question

.button을 클릭하면 4 개의 게시물을 숨기고 다음 4 개의 게시물을 표시하고 .button을 클릭하면 두 번째 게시물이 표시됩니다 (예 : 게시물 5-8) 다음 4 (포스트 9-12) 등을 보여줍니다.

var i = 0; 
    function fadeOutFour(){ 
     $('.post').eq(i++).fadeOut(1000, function(){ 
     $('.post').eq(i++).fadeIn(1000); 
     $('.post').eq(i++).fadeIn(1500); 
     $('.post').eq(i++).fadeIn(2000); 
     $('.post').eq(i++).fadeIn(2500); 
     }); 
     $('.post').eq(i++).fadeOut(750); 
     $('.post').eq(i++).fadeOut(500); 
     $('.post').eq(i++).fadeOut(250); 
    } 

    $('.button').click(function(){ 
     fadeOutFour(function(){ 
      i += 4; 
     }); 
    }); 

지금 내가 작업을 클릭 한 후 새 변수를 얻을 수 없습니다

내 코드는 다음과 같이 보입니다. 그래서 우선, 내가 뭘 잘못하고 있니? 그리고 더 원활하고 똑똑한 방법이 있다면, 알려주세요 :) 건배!

Answer 1

찾고 계신 것입니까?

Working jsFiddle here

var i = 0; 
$('.post').eq(i++).fadeIn(1000); 
$('.post').eq(i++).fadeIn(1500); 
$('.post').eq(i++).fadeIn(2000); 
$('.post').eq(i++).fadeIn(2500); 

function fadeOutFour() { 
    firstHide(i); 
    thenShow(i); 
    i += 4; 
} 

function firstHide(i) { 
    h = i - 4; 
    $('.post').eq(h++).fadeOut(1000); 
    $('.post').eq(h++).fadeOut(750); 
    $('.post').eq(h++).fadeOut(500); 
    $('.post').eq(h++).fadeOut(250); 
} 

function thenShow(i) { 
    $('.post').eq(i++).fadeIn(1000); 
    $('.post').eq(i++).fadeIn(1500); 
    $('.post').eq(i++).fadeIn(2000); 
    $('.post').eq(i++).fadeIn(2500); 
} 

$('.button').click(function() { 
    fadeOutFour(function() { 
     i += 4; 
    }); 
}); 

Answer 2

이 작업을 수행 할 수있는 쉽고 간결한 방법이

가보고

http://jsfiddle.net/techsin/cfBeu/4/

• 이전의 것들까지 다음 항목 없음 미리로드를 타고있다 괴롭다 이자형.
• 정확히 n/4가 아니더라도 추가 항목을로드 할 수 있습니다.
• 코드가 적습니다.
• 부드럽게. 다음은

코드 :

var n=v=4, time= 500, $p= $('.post'), t =true; 


$('.button').click(function(){ 
    if(t){ 
     t=false; if(n<$p.length+1) so(); 
    }}); 

st(); 
function st() {$p.slice(n-v,n-0).fadeIn(time,function(){t=true;});} 
function so() {$p.slice(n-v,n-0).fadeOut(time,function() {st();}); n+=v;}