我在<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/)。不确定是否可以动画渐变背景的不透明度?