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

  • 0
    いいね
  • 0
    コメント
    この記事は最終更新日から1年以上が経過しています。

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

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