如何让一个div淡入淡出？

您好我目前有跨越悬停的图像上显示，但是我想使用一些JavaScript或CSS转换，使这个div褪色到约0.8不透明度悬停，然后回到0时，鼠标不徘徊。如何让一个div淡入淡出？

这里是我如何把它设置到目前为止的例子，现在需要所有这就是是渐变和0.8不透明度：

我肯定有一个简单的代码位，有人有这样做

非常感谢帮助！

2011-07-26 Ryan

实况链接是一个很棒的*附加*的问答n，但始终在问题*中发布相关代码*。两个原因。 1.人们不应该遵循链接来帮助你。 2. StackOverflow不仅适用于您，而且适用于将来也有类似问题的其他人。外部链接可以被移动，修改，删除等。通过确保相关代码在问题中，我们确保问题（及其答案）在合理的时间段内保持有用。 –

所以...这是CSS3/HTML5的方式来做到这一点。然而，这在IE中不起作用：它会以常规方式回落（所以它可以工作，但它不像真正的浏览器那样流畅）。

div.yourDiv { 
    -webkit-transition: .4s ease-in-out opacity; 
    -moz-transition: .4s ease-in-out opacity; 
    -o-transition: .4s ease-in-out opacity; 
    transition: .4s ease-in-out opacity; 
} 

div.yourDiv:hover { 
    opacity: 0.8; 
}

由于CSS3转换正在使用硬件加速，这真的非常流畅！除此之外，你甚至不需要任何Javascript或jQuery的这个=）！

来源

2011-07-26 07:55:01 elslooo

是啊，我在我来到stackoverflow之前试过这个，因为我喜欢使用CSS转换，它只是当我添加转换到悬停时未隐藏的跨度。它不会淡入？ – Ryan

试试这个：http://jsfiddle.net/eg2wL/ :)？ – elslooo

你的天才。最佳解决方案：D谢谢。这是因为展示：没有。这是造成这个问题。我使用不透明度0现在哈哈 – Ryan

.classa 
{ 
opacity:0.8; 
}

可以addClass和removeClass像

$("div.image-hover").hover(
function(){ 
//fadein 
$(this).addClass("classa"); 
}, 
function(){ 
//fadeout 
    $(this).removeClass("classa"); 
} 
);

这里是小提琴http://jsfiddle.net/2RN6E/8/

下面

评论后可进行编辑，你可以使用fadeTo

$("div.image-hover").hover(
function(){ 
//fadein 
$(this).fadeTo("2000", "0.8"); 
}, 
function(){ 
//fadeout 
    $(this).fadeTo("2000","1"); 
}

这里是小提琴http://jsfiddle.net/2RN6E/14/ ）;

来源

2011-07-26 07:48:16 Rafay

他说*淡入淡出，而不是立即淡入淡出。 –

你是对的我没有想到，更新了答案 – Rafay

您可以使用CSS的:hover伪类，除非你需要支持IE6：

.image-hover:hover { 
    opacity: .8; 
} 

* html .image-hover:hover { /* For IE7 and higher */ 
    filter: alpha(opacity=80); 
}

这不会褪色至80％，但是，它只会去那里立刻。要做到这一点，你可以使用jQuery的hover和animate功能（编辑：或fadeTo，这仅仅是animate上opacity一个便利的包装，如下图所示）：

$(".image-hover").hover(
    function() { 
     $(this).stop().animate({opacity: "0.8"}); 
    }, 
    function() { 
     $(this).stop().animate({opacity: "1"}); 
    } 
);

这不是从你的问题清楚什么跨度中的文本应该是在做，但这些是让你开始的工具。

Here's an updated version of your fiddle显示动画;我使用0.6而不是0.8，所以更明显。

来源

2011-07-26 07:50:58

为什么不使用'fadeTo'而不是'animate'？ =） –

@Tomas：没有特别的原因，当我回答时，'animate'就是我的手指。 :-)'fadeTo'只是调用'animate'，尽管它首先检查以确保元素正在显示。 –

对试图编辑不透明度的人：“1”到不透明度：“0”（对不起，在拒绝之前没有记下名字的时间）：不，当我们解除时，它应该是“1” - 让div回到完整显示。 –

你可以这样做：

function fadein() { 
    $('.desc').animate({ 
     opacity: 0.8, 

    }, 1000, function() { 
     // Animation complete. 
    }) 

} 

function fadeout() { 
    $('.desc').animate({ 
     opacity: 0, 

    }, 1000, function() { 
     // Animation complete. 
    }) 

} 

$('.image-hover').hover(fadein, fadeout);

小提琴这里：http://jsfiddle.net/nicolapeluchetti/2RN6E/9/

来源

2011-07-26 07:56:26

嘿，这个人的作品很甜蜜，但当它悬停在链接上时，它会因某种原因而不断循环，我只是需要它停止这样做。 Hmmmmm？ – Ryan

在Firefox中，它能正常工作，您使用的浏览器是什么？ –

这段代码保存为description元素块显示：http://jsfiddle.net/2RN6E/11/

它只是用了jQuery的动画功能：

$(".image-hover").hover(function() { 
    $(".desc").animate({opacity: '0.75'},'slow'); 
}, function() { 
    $(".desc").animate({opacity: '0'},'slow'); 
});

来源

2011-07-26 08:01:42 Purag

如何让一个div淡入淡出？

回答

相关问题