jquery - このサイトで使用されている効果の種類は何ですか?

Question

ウェブサイト --> http://inspiredm.comは、投稿画像にホバー効果を使用しています。それはどのような効果ですか？それは CSS3 または jquery 効果であり、同様の効果を行う方法は?

Answer 1

<a>画像を囲むタグにクラス「imgHover」を追加しているようです。これは JavaScript を介して行われます。次に、スタイルシートで、.imgHover img {opacity:0.7}

つまり、そのサイトは JS と CSS の組み合わせを使用しています。:hoverまた、疑似クラス (つまり)を使用して純粋な css で実行するimg:hover {opacity:0.7}か、JavaScript でより直接的に不透明度を設定することによっても実行できます。jQuery では、次のようになります。

$('img').hover(function(){
    $(this).css('opacity', 0.7);
}, function(){
    $(this).css('opacity', 1);
});

Answer 2

cssの不透明度の可否ですが、ie8では動きません！

この効果は次のように作成できます。

<a><img src="image.jpg" /></a>

a:hover {
background:#fff;
}

a:hover img {
opacity:0.7;
}

編集：

ページをスクロールするときの画像読み込み後の遅延について言及している場合は、おそらく jQuery の遅延読み込みプラグインのようなものです。

http://www.appelsiini.net/projects/lazyload