マウスホバーした要素にマッチする要素以外にオーバーレイをjQueryでかける

Result

jQuery

$(document).ready(function() {
    var $menu = $('#menu'),
        $container = $('#container'),
        $content = $container.find('.content');
     //コンテンツからp要素やh要素を探してclassを与える
    $content.find('p').addClass('effect e-fade').end().find('h1, h2, h3').addClass('effect e-fade e-color');

     //classを与えられた要素を探す
    var $elems = $(document).find('.effect'),
        OverlayEffect = (function() {
            //オーバーレイのスピードとカラー
            var speed = 1000,
                eventOff = 'mouseenter',
                eventOn = 'mouseleave',
                colorOff = '#AAAAAA',

                init = function() {
                    //本デモには無いけど見出しの処理
                    $elems.each(function() {
                        var $el = $(this);
                        if ($el.hasClass('e-color')) $el.data('original-color', $el.css('color'));
                    });
                    initEventsHandler();
                },
                initEventsHandler = function() {
                    //a要素からidを探して処理を施す
                    $menu.delegate('a', eventOff, function(e) {

                        var relation = $(this).attr('id');
                        animateElems('off', relation);
                        return false;
                    }).delegate('a', eventOn, function(e) {
                        var relation = $(this).attr('id');
                        animateElems('on', relation);
                        return false;
                    });
                },
                animateElems = function(dir, relation) {
                    var $e = $elems;
                    switch (dir) {
                    case 'on':
                        if (relation) $e = $elems.not('.' + relation);

                        $e.each(function() {
                            var $el = $(this),
                                color = $el.data('original-color'),
                                param = {};
                            if ($el.hasClass('e-color')) param.color = color;
                            if ($el.hasClass('e-fade')) param.opacity = 1;
                            $el.stop().animate(param, speed);
                        });
                        break;
                    case 'off':
                        if (relation) $e = $elems.not('.' + relation);

                        $e.each(function() {
                            var $el = $(this),
                                param = {};
                            if ($el.hasClass('e-color')) param.color = colorOff;
                            if ($el.hasClass('e-fade')) param.opacity = 0.1;

                            $el.stop().animate(param, speed);
                        });
                        break;
                    }
                };
            return {
                init: init
            };
        })();
    OverlayEffect.init();
});

css

#menu li{float:left;margin:5px;}
#menu {padding:0 0 25px 25px;}
.content{clear:both;margin:50px;}
.content p{margin-bottom: 25px ;}

html

<div id="container" class="container"> 
    <ul id="menu" class="menu"> 
        <li><a href="#" id="effect-a">effect-a</a></li> 
        <li><a href="#" id="effect-n">effect-n</a></li> 
        <li><a href="#" id="effect-b">effect-b</a></li> 
        <li><a href="#" id="effect-c">effect-c</a></li> 
        <li><a href="#">All</a></li> 
    </ul> 
    <div class="content"> 
        <p class="effect-a">effect-aのテキスト</p> 
        <p class="effect-n">effect-nのテキスト</p> 
        <p class="effect-b">effect-bのテキスト</p> 
        <p class="effect-c">effect-cのテキスト</p> 
    </div> 
</div>

via

Overlay-like Effect with jQuery | Codrops