有没有一种方法来动画的悬停类在jquery中不使用插件/ui工具包

Is there a way to animate a hover class in jquery without using plugins/ui kits?

本文关键字：jquery 工具包 ui 插件 悬停 一种 方法 动画 有没有      更新时间：2023-09-26

我在<h3>Some header</h3>上有一个滚动效果，我想让背景在悬停时淡入/淡出。

其正常状态为:

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简单的动画(或者我可以吗?)。

可以不使用任何插件或jQuery ui工具包?或者-是否有可能在css3动画中实现?我尝试了css3动画添加到h3这段代码，但它产生了奇怪的效果，而不是简单的淡出:

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;
}

谢谢,阿龙

使用jQuery可以这样做。

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();
        }
   );
});

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

http://cssdesk.com/MGyKp

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

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

我会创建2个标题，1有背景，1没有。使用jQuery在两者之间渐变。可能会在所有浏览器上工作。

你可以传递多个属性到一个jQuery动画函数(http://api.jquery.com/animate/)。不确定是否可以动画渐变背景的不透明度?

相关文章：