Непрозрачность градиентного перехода div

Question

Итак... У меня есть некоторые элементы div, и я хочу, чтобы их щелчок мышью другого элемента привел к полной прозрачности. Но я не хочу, чтобы они исчезли сразу. Я хочу, чтобы они постепенно исчезали слева направо в градиенте, начиная с полной непрозрачности и заканчивая полной прозрачностью.

У меня нет никакого кода, потому что я не смог найти в Интернете ничего, что говорило об этом.

Я ценю любую помощь, которую кто-либо хотел бы оказать.

Answer 1

Вы можете создать функцию fadeIn и функцию fadeOut с помощью jQuery и вызывать себя при обратном вызове в пределах одной и той же функции, пока все элементы не будут обработаны:

http://jsfiddle.net/UukNh/1/

allDivs = $(".container div").length; // get number of elements

$(".button").click(function() {
    $(this).toggleClass('fadeIn')
    if ($(this).hasClass('fadeIn')){
        fadeOut(0); // function to hide elements
    }else{
        fadeIn(0); // function to show elements
    }
}     



var fadeOut = function(i) {  
    $("div.container div:eq("+i+")").fadeTo('slow', 0, function() {
        if(i <= allDivs ){
           fadeOut(i+1);   
        }
    })
}

var fadeIn = function(i) {
    $("div.container div:eq("+i+")").fadeTo('slow', 1, function() {
        if(i <= allDivs ){
           fadeIn(i+1);   
        }
    })
}


// This just changes the text of the button.

$('.button').toggle(function() {
    $(this).text('Fade in');
}, function() {
    $(this).text('Fade Out');
});    

Answer 2

Клонируйте ваш div в (n) число экземпляров, которые вы хотите, каждый клонированный div имеет (a) ширину и место рядом друг с другом

Original
                                                Clones
-----------------             --------------------
|               |             |   |   |   |   |   |
|               |     =>      |   |   |   |   |   |
|               |             |   |   |   |   |   |
|               |             |   |   |   |   |   |
-----------------             --------------------

Теперь вы можете запустить цикл, чтобы исчезнуть слева направо

(Эта техника используется в слайдере nivo)

Существует библиотека края JS http://www.netzgesta.de/edge/. Что произойдет, если вы оживите край? Ты можешь попробовать

Answer 3

Посмотрите на эту скрипку.

Вот JS:

var fadeDivs = $('.fadeDiv'),
    fadeDiv = (function () {
        var maxDivs = fadeDivs.length,
            i = -1;
        return function () {
            i += 1;
            if (i === maxDivs) return;
            $(fadeDivs[i]).animate({opacity: '0'}, 500, fadeDiv);
        };  
    })();;

fadeDivs[0].onclick = fadeDiv;

fadeDiv вызывается каждый раз, когда предыдущий div заканчивает анимацию.

Answer 4

Вы можете быть в состоянии:

1. Поместите прозрачный холст HTML5 поверх div
2. Визуализация div в холсте HTML5
3. Скрыть див
4. Используйте альфа-прозрачность, чтобы создать эффект прозрачного градиента.

Сначала вам нужно будет найти решение для визуализации элемента HTML5 на холсте HTML5.

Если ваш div - это просто изображение или что-то простое, вы все равно можете использовать этот подход, визуализируя каждый компонент div на холсте самостоятельно.