有没有一种方法可以在不使用插件/ui 套件的情况下在 jquery 中对悬停类进行动画处理？

Question

我对

Some header

有翻转效果，并且我希望背景在悬停时能够很好地淡入/淡出。

它的正常状态是：

h3 {
background: none;
}

悬停是一个 css3 动画：

h3:hover {
    background-image: linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -o-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -moz-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -webkit-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);
    background-image: -ms-linear-gradient(bottom, #FFFFFF 25%, #FCFCFC 100%);

    background-image: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, #FFFFFF),
        color-stop(1, #FCFCFC)
    );
}

因为我有很多规则 - 我不能在 jQuery simple animatie 中做到这一点（或者我可以吗？）。

可以在不使用任何插件或 jQuery ui 工具包的情况下完成吗？或者 - 是否可以在 css3 动画中实现它？我尝试通过添加到 h3 这段代码来实现 css3 动画，但它产生了奇怪的效果，而且根本不是简单的淡入淡出：

h3 {
-webkit-transition: all 0.1s ease-out;  /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out;  /* FF4+ */
-ms-transition: all 0.3s ease-out;  /* IE10? */
-o-transition: all 0.3s ease-out;  /* Opera 10.5+ */
transition: all 0.3s ease-out;
}

谢谢， 阿隆

Answer 1

您可以使用 jQuery 来实现类似 this 的操作。

CSS：

h3 {
    margin: 10px;
}
div.h3_bg {
    background: linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -o-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -moz-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -webkit-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -ms-linear-gradient(bottom, #FF0000 25%, #FCFCFC 100%);
    background: -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0.25, #FF0000),
        color-stop(1, #FCFCFC)
    );
}

JavaScript：

$("h3").each(function() {
    $("body")
        .append(
            $('<div>', {class:"h3_bg"})
                .width($(this).outerWidth())
                .height($(this).outerHeight())
                .hide()
                .css({
                    position: "absolute",
                    top: $(this).offset().top,
                    left: $(this).offset().left,
                    zIndex: -1
                })
        );
    $(this).hover(
        function() {
            $("div.h3_bg").eq($(this).index()).fadeIn();
        },
        function() {
            $("div.h3_bg").eq($(this).index()).fadeOut();
        }
   );
});

Answer 2

这也可以在没有 jQuery 的纯 CSS2.1 + CSS3 中完成。

http://cssdesk.com/MGyKp

顶部没有额外的标记，底部有额外的跨度。遗憾的是，它在 Safari 中运行不佳，但在 Firefox 中运行良好。

对于跨浏览器体验，本线程中的 jQuery 解决方案是最好的。

Answer 3

我会创建 2 个标题，1 个带背景，1 个不带背景。使用 jQuery 在两者之间淡入淡出。据我所知，适用于所有浏览器。

您可以将多个属性传递给 jQuery 动画函数 (http://api.jquery.com/animate/)。不确定是否可以为渐变背景设置不透明度动画？