超簡単なjQueryによる画像ロールオーバー エフェクト

jQueryで非常に簡単に実装する、ロールオーバー(hover)でのエフェクト実装です。画像にマウスを乗せたときに、簡単に一瞬光るような感じのアニメーションを実装します。



/*
 * Ex: hover effect, image link.
 * Update: 2011-05-01
 * auther: Luvsic
 * licence: MIT
 * info: http://luvsic.net/item/140
 *
 */


jQuery(function(){

        $('a img').hover(
                function(){
                        $(this).fadeTo(0, 0.7).fadeTo('slow', 1);
                },
                function(){
                        $(this).fadeTo('fast', 1);
                }
        );

});

サンプル

行っていることは単純です。透明度を0.7にしてから、アニメーションで1.0に戻すだけ。背景透過のレイヤーに配置している場合は工夫が必要になりますが、たいていは白背景ですし、そうでないとしても白背景のdivやa要素でくくってあげれば対応できるケースが多そうです。

上記コードはIE6以上、その他モダンブラウザで対応しています。CSSのopacityをアニメーションさせているだけではありますが、jQueryのcss()を利用するのではなく、クロスブラウザ対応エフェクトであるfadeTo()を利用するのがポイントです。内部的にopacityとIE独自実装のfillter()を両方利用しているのでしょう。

/ /
Skooler Records

No comments yet

%3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%22%20%76%61%6c%75%65%3d%22%65%35%34%63%61%30%33%61%63%35%37%36%65%31%39%63%37%62%37%37%37%64%33%31%39%38%30%63%36%66%62%36%22%3e %3c%69%6e%70%75%74%20%74%79%70%65%3d%22%68%69%64%64%65%6e%22%20%6e%61%6d%65%3d%22%6e%70%5f%70%72%6f%74%65%63%74%62%79%6d%64%35%5f%68%61%73%68%22%20%76%61%6c%75%65%3d%22%66%30%33%66%34%61%39%37%33%61%39%38%37%63%38%31%35%34%39%64%37%33%31%64%34%38%63%33%37%33%39%34%22%3e
© 2006 – 2018 by Luvsic. Some rights reserved.