JQuery：從左邊退出imagecolumns

Question

我真的沒有發現任何關於它的東西。我所知道的是一個對角線淡出插件，看起來不錯（看這裏：http://jonobr1.github.com/diagonalFade/） 但我不想它對角線，我只想從左邊淡出效果，顯然這個「簡單的任務」不包括在內插入。

是一個插件可能在頂部，它會更容易做一個小循環？例如：在200毫秒內將第一行的不透明度設爲0到1，延遲20秒，對第二行做同樣的操作，依此類推。

我的標記看起來是這樣的：

<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

你可以使用jQuery的.fadeTo（）函數來完成這項工作。

1）給出每列不同的ID來識別它，像這樣：

<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中處理動畫。這將調用.fadeTo（200，1.0），每列，其中200代表一個200毫秒的動畫時間，以及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> 

希望幫助！