MooTools:聚焦单个元素（淡入淡出）

Posted 2021-02-25

via [http://davidwalsh.name/opacity-focus](http://davidwalsh.name/opacity-focus)

<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);
            }
        });
    });
});