Jquery loop opacity fadein of images

I have three images on my page:

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

The class of opacity1 gives them all an opacity of 0.6 using css.

How can i, using Jquery, create a script that will set each of them individually to opa开发者_如何学JAVAcity 1.0 then back to opacity 0.6 and do this clockwise with a delay between each of them?

You can use fadeTo() and 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);
        });
    }
});

You can test that implementation here.

Something like this:

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

I use this such of code to FadeOut some Message boxes, one by one.