Advanced Search

Return to Snippet

Revision: 26305
at April 23, 2010 03:13 by cfleschhut
Initial Code 
<div class="fade">
    <img id="pic1" src="http://dummyimage.com/100x100" alt="" />
    <img id="pic2" src="http://dummyimage.com/100x100" alt="" />
    <img id="pic3" src="http://dummyimage.com/100x100" alt="" />
    <img id="pic4" src="http://dummyimage.com/100x100" alt="" />
</div>


$$("div.fade").each(function(container) {
    container.getChildren().each(function(child) {
        var siblings = child.getParent().getChildren().erase(child);
        child.addEvents({
            mouseenter: function() {
                siblings.set("tween", {
                    duration: 400
                }).tween("opacity", 0.4);
            },
            mouseleave: function() {
                siblings.set("tween", {
                    duration: 400
                }).tween("opacity", 1);
            }
        });
    });
});
Initial URL 
http://jsfiddle.net/5mfdt/
Initial Description 
via [http://davidwalsh.name/opacity-focus](http://davidwalsh.name/opacity-focus)
Initial Title 
MooTools: Focus Single Element (Siblings Fade)
Initial Tags 
javascript
Initial Language 
JavaScript