JQuery : 왼쪽에서 imagecolumns를 페이드 아웃

Question

나는 그것에 대해 아무것도 발견하지 못했다. 내가 알고있는 것은 대각선 페이드 플러그인이다. (보기 : http://jonobr1.github.com/diagonalFade/) 그러나 나는 그것을 대각선으로 바라지 않는다. 나는 왼쪽에서만 페이드 효과를 원한다. 분명히이 "쉬운 일"은 그 안에서 다뤄지지 않는다. 플러그인.

플러그인이 맨 위에있을 수 있으며 약간의 반복 만 더 쉽게 할 수 있을까요? 무언가를 좋아하십시오 : 200ms에있는 첫번째 줄을위한 0에서 1의 불투명도 자극, 20s 지연과 더불어 두번째 줄을 위해 동일을 계속하는 등등.

내 태그는 다음과 같습니다 : 당신은 일을 얻기 위해 jQuery의 .fadeTo() 함수를 사용할 수

<div class="image_gallery"> 
    <div class="image_column"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
    <div class="image_column"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
    <div class="image_column"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
    <div class="image_column"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
</div> 

Answer 1

.

1)과 같이, 그것을 식별하기 위해 각 열의에 다른 자료 :

<div class="image_gallery"> 
    <div class="image_column" id="column_1"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
    <div class="image_column" id="column_2"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
    <div class="image_column" id="column_3"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
    <div class="image_column" id="column_4"> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    <div class="image"><img src="#" alt="" /></div> 
    </div> 
</div> 

2) 0

3의 불투명도와 모든 컬럼을 시작) 함수를 작성하는 jQuery에서 애니메이션을 처리합니다. 이 200은 200 밀리 애니메이션 지속 시간을 나타내는 각각의 컬럼에 .fadeTo (200, 1.0)를 호출하며, 1.0과 같이, 대상 불투명도를 나타냅니다 : 당신이 원하는 페이지로드)

<script> 
function fadePicturesIn(columnNum) { 
    setTimeout(function() { 
    $("#column_" + columnNum).fadeTo(200, 1.0); 
    if (columnNum < 4) { 
     fadePicturesIn(columnNum + 1); 
    } 
    }, 20000); // 20s delay 
} 
</script> 

4 (또는 애니메이션을 트리거하려면) 함수를 호출하십시오. 도움이

<script> 
$(document).ready(function() { 
    fadePicturesIn(1); 
}); 
</script> 

또는

<script> 
$("#myButton").click(function() { 
    fadePicturesIn(1); 
}); 
</script> 

희망!