Question

嗨我目前有悬停时显示在图像上的跨度，但是我想使用一些javascript或css过渡使这个div在悬停时淡入大约0.8不透明度然后在鼠标悬停时返回到0

以下是我到目前为止如何进行设置的示例，现在所需要的只是淡入淡出和0.8不透明度：

我确定有一个简单的代码，有人必须这样做

非常感谢帮助谢谢！

Answer 1

所以......这是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-transitions使用硬件加速，这真的非常流畅！除此之外，你甚至不需要任何Javascript或jQuery =）！

Answer 2

您可以使用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，所以它更明显。

Answer 3

.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/ ）;

Answer 4

你可以这样做：

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/

Answer 5

此代码保留description元素的块显示：http://jsfiddle.net/2RN6E/11/

它只使用jQuery的animate函数：

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

如何在悬停时使div淡出？

5 个答案: