jQuery和css3鼠标滑过背景模糊特效

这是一款效果十分炫酷的jQuery和css3鼠标滑过背景模糊特效。在插件中使用了CSS3 transitions和使用jQuery来切换class。不是所有的浏览器都支持CSS3 transitions，最好使用Chrome或Safari浏览器来查看demo。

HTML

html结构十分简单：

<section class="ib-container" id="ib-container">
    <article>
        <header>
            <h3><a href="#">Some Headline</a></h3>
            <span>Some other text</span>
        </header>
        <p>Some introduction</p>
    </article>
    <article>
        <!-- ... -->
    </article>
    <!-- ... -->
</section>
                

JAVASCRIPT

当我们用鼠标hover一篇文章，将使用jQuery给当前鼠标滑过的文章一个class active，而给其它文章一个class blur。

var $container  = $('#ib-container'),
    $articles   = $container.children('article'),
    timeout;

$articles.on( 'mouseenter', function( event ) {
        
    var $article    = $(this);
    clearTimeout( timeout );
    timeout = setTimeout( function() {
        
        if( $article.hasClass('active') ) return false;
        
        $articles.not($article).removeClass('active').addClass('blur');
        
        $article.removeClass('blur').addClass('active');
        
    }, 75 );
    
});

$container.on( 'mouseleave', function( event ) {
    
    clearTimeout( timeout );
    $articles.removeClass('active blur');
    
});

css代码请参考下载文件。