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

Answer 2

$("#gallery img")
    .css('opacity', 0.2)
    .mouseover(function() {
        $(this).animate({opacity: 1}, 100);
    })
    .mouseout(function() {
        $(this).animate({opacity: 0.2}, 100);
    });

See it in action

显示隐藏不透明的div

2 个答案: