jquery.hoverGrayscale

yuqq.js

License: MIT License

Fork
10
Fav
4
View
5473
  • Play

Fullscreen

Smart Phone

Fork tree

  • Readme
  • JavaScript 84 lines
  • HTML 6 lines
  • CSS 4 lines
画像にグレースケール効果を与えて、マウスオーバーで徐々に彩度を上げていって、マウスアウトで彩度を下げてくjQueryプラグイン。

適用する画像にはCSSであらかじめvisibility: hidden;を設定しておいたほうがいいかもしれない。

↓みたいに使います。

$('img.photo').hoverGrayscale({
speed: 300, // アニメーション速度(ms)
opacity: 0.8, // 0~1までの数値でグレースケールの度合いを指定。高くなるほど彩度が低くなります。
reverse: true // マウスオーバーでグレースケール
});

// 第1, 2引数でspeedの設定可
$('img.photo').hoverGrayscale(300);
$('img.photo').hoverGrayscale({ reverse: true }, 300);
  • jquery.hoverGrayscale
  • jQuery v1.7.1
  • jquery.hoverGrayscale

play

Complete!

Description What kind of game?

Control Device

jsdo.it websocket controller

Mouse

keyboard

smartphone

Fullscreen

Default Panel

Size

  • Width: px
  • Height: px

code

QR Code

Discussion

Questions on this code?

Tags

Favorite by

Forked

sort by