JQuery: Fade in imagecolumns слева

Question

Я действительно ничего не нашел об этом. Все, что я знаю, это диагональный плавный плагин, который выглядит красиво (см. Здесь: http://jonobr1.github.com/diagonalFade/) Но я не хочу, чтобы он был диагональным, я хочу, чтобы эффект затухания был только слева, и, по-видимому, эта «легкая задача» не покрывается внутри этого Plugin.

Возможно, это плагин поверх, и было бы проще просто сделать небольшой цикл? Что-то вроде: Анимация непрозрачности 0 до 1 для первой строки в 200 мс, с задержкой 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) Дайте каждый столбец другой идентификатор, чтобы идентифицировать его, например, так:

<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> 

Надежда, что помогает!