jQuery opacity animated on MouseOver and MouseLeave

by Roberto Apasajja

HTML

<div id="id_1" style="opacity:0.5"><img src=http://www.gstatic.com/cf/logo_small_ru.gif alt="" /></div>
<div id="id_2" style="opacity:0.5"><img src=http://www.gstatic.com/cf/logo_small_ru.gif alt="" /></div>
<div id="id_3" style="opacity:0.5"><img src=http://www.gstatic.com/cf/logo_small_ru.gif alt="" /></div>

CSS

#id_1, #id_2, #id_3{padding:20px;border:1px solif #000;}
#id_1{background:#F00;}
#id_2{background:#0F0;}
#id_3{background:#00F;}

JavaScript

$(function() {
    jQuery('#id_1, #id_2, #id_3').each(function() {
        $(this).data('op', $(this).css('opacity'));
    }).mouseover(function() {
        $(this).animate({
            opacity: 1
        }, 500);
    }).mouseleave(function() {
        $(this).stop(true, true).animate({
            opacity: $(this).data('op')
        }, 500);
    });
});