jquery - 显示隐藏不透明的div

Question

我有一个图像库，我希望从这些图像开始淡出，然后当用户将鼠标悬停在图像上时，它会淡入完整图像。

我知道这很容易用多个图像等来完成...但我想知道是否可以在页面加载时使用透明度设置为特定级别的分区，然后当用户将鼠标放在图像上时它显示正确的图像并淡化 div。

在我看来，这似乎是一个非常简单的想法，但很难找到不涉及加倍图像的选项。

Answer 1

CSS:

img {
    opacity: 0.5;
    -webkit-transition: opacity 0.5s linear;
}
img:hover {
    opacity: 1;
    -webkit-transition: opacity 0.5s linear;
}

jQuery:

$('img').css('opacity',0.5);
$('img').hover(
    function(){
        $(this).stop().animate({opacity: 1}, 500);
    },
    function(){
        $(this).stop().animate({opacity: 0.5}, 500);
    });

JS Fiddle demo of both of the above techniques .

---

要定位那些不匹配选择器的元素，您可以使用:

$('#jQueryOnlyV2 img:not(".noFading")').css('opacity',0.5);
$('#jQueryOnlyV2 img:not(".noFading")').hover(
    function(){
        $(this).stop().animate({'opacity':1},500);
    },
    function(){
        $(this).stop().animate({'opacity':0.5},500);
    });

其中选择器匹配所有不具有 CSS class="noFading" 且包含在具有 id="jQueryOnlyV2" 的元素中的图像。

这使用了 :not() CSS3 选择器语法，虽然 jQuery not()如果您愿意，可以类似地使用。

Revised jQuery demo .