baserJS
baserJSDay 20

baserJSでマウスオーバーすると一瞬透明になるエフェクトをかける

More than 3 years have passed since last update.

Webサイトと詳しいAPIリファレンスはこちら baserJS Webサイト

マウスオーバーすると一瞬透明になるエフェクトをかける

// href属性をもつa要素の中のimg要素が対象とすると
$('a[href] img').bcWink();

// オプション (以下デフォルト値)
$('a[href] img').bcWink({
    close: 50, // 透明になるまでの時間(ミリ秒)
    open: 200, // 透明から戻るまでの時間(ミリ秒)
    opacity: 0.4, // 不透明度の下限
    target: null, // 後述
    stopOnTouch: true // タッチイベントではエフェクトを無効にする
});

注意点

昔からある既知の問題ですが、IE8以前の透過PNGはalphaフィルタを当てるとアルファチャンネルカラーが黒く濁る問題があるので、使用は避けたほうがいいでしょう。

上記の問題を解消するプラグインも多数存在しますが、原因不明の特定の条件下では解消できなかったりということがザラにある(あった)のでお薦めはできません。