Javascript 有没有办法在jquery中设置悬停类的动画而不使用插件/ui工具包？

我在

某个标题上有一个翻滚效果，我希望背景在悬停时很好地淡出

其正常状态为：

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中，但它产生了奇怪的效果，而不是简单的fadein：

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在2之间淡入淡出。将与所有浏览器一起工作

可以将多个属性传递给jQuery动画函数(http://api.jquery.com/animate/). 但不确定是否可以为渐变背景设置不透明度动画？
您可以像使用jQuery一样进行此操作

CSS:

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

$（“h3”）。每个（函数（）{
$（“正文”）
.附加(
$（''，{class:“h3_bg”}）
.width（$（this）.outerWidth（））
.height（$（this）.outerHeight（））
.hide（）
.css({
位置：“绝对”，
top:$（this）.offset（）.top，
左：$（this）.offset（）.left，
zIndex:-1
})
);
$（此）。悬停(
函数（）{
$（“div.h3_bg”）.eq（$（this.index（））.fadeIn（）；
},
函数（）{
$（“div.h3_bg”）.eq（$（this.index（））.fadeOut（）；
}
);
});
这也可以在纯CSS2.1+CSS3中完成，而无需jQuery


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

对于跨浏览器体验，此线程中的jQuery解决方案是最好的。
在jQuery中设置css3渐变动画是不可能的-这里的问题看起来不错，但解释很好。对于ad To，CSS 3转换不支持
background:gradient
-到
background:different gradient
@OmShankar问一个新问题。
$("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();
        }
   );
});