LoginSignup
0
0

More than 5 years have passed since last update.

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

Posted at

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フィルタを当てるとアルファチャンネルカラーが黒く濁る問題があるので、使用は避けたほうがいいでしょう。

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0