JQuery Loop непрозрачность изображения

Question

У меня есть три изображения на моей странице:

    <div class="imagesmall fader1 opacity1"><img src="/images/mercedes.png" /></div>
<div class="imagesmall2 fader2 opacity1" style="margin-left:5px;"><img src="/images/house.png" /></div>
<div class="imagesmall2 fader3 opacity1" style="margin-left:5px;"><img src="/images/polo.png" /></div>

Класс opacity1 дает им непрозрачность 0,6, используя css.

Как я могу, используя Jquery, создать скриптчто установит для каждого из них непрозрачность 1,0 по отдельности, затем обратно к непрозрачности 0,6 и сделает это по часовой стрелке с задержкой между каждым из них?

Answer 1

Вы можете использовать fadeTo () и delay () :

$(document).ready(function() {
    performEffect($("div.opacity1:first"), 1000);

    function performEffect($div, delay)
    {
        $div.fadeTo("slow", 1).fadeTo("slow", 0.6, function() {
            var $next = $div.nextAll("div.opacity1");
            if (!$next.length) {
                $next = $("div.opacity1");
            }
            performEffect($next.first().delay(delay), delay);
        });
    }
});

Вы можете протестировать эту реализацию здесь .

Answer 2

Примерно так:

var TimeOut = 4;
$('.opacity1').each(function() {
    setTimeout(function(ele) {
        ele.animate({opacity: 1}, 5000, function() { ele.animate({opacity: 0.6}); }
    }, 1000 * timeOut++, $(this));
};

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