使用的 jQuery 库:
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
我有这个 jquery 代码:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#header-out').css('background-color','rgba(255,255,255,.25)').hover(function() {
$(this).stop().css('background-color','rgba(255,255,255,.80)').animate({
height: '400px'
}, 800);
}, function() {
$(this).stop().css('background-color','rgba(255,255,255,.25)').animate({
height: '75px'
}, 800);
});
});//]]>
</script>
我遇到的问题是背景不透明度不会随着展开而延迟。
我的目标是随着 div 扩展而不是立即从 .25 跳到 .80,不透明度从 .25 变为 .80。我希望 .80 的不透明度在 div 折叠时返回到 .25,而不是在移除鼠标时立即返回。
我不确定这段代码是否是用于我打算做的事情的最佳代码。
总体目标是使标题在鼠标悬停/悬停时扩展,同时背景不透明度发生变化。
我尝试过的其他方法:
起初我使用 CSS 给 #header-out
一个背景:
#header-out {
background: rgba(255,255, 255, .25);
}
而我使用的jquery代码如下:
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#header-out').hover(function() {
$(this).stop().animate({
opacity: '.80',
height: '400px'
}, 800);
}, function() {
$(this).stop().animate({
opacity: '.25',
height: '75px'
}, 800);
});
});//]]>
</script>
我在上述方法中发现的问题是,页面将以 .25 的不透明度加载 #header-out
。悬停后,#header-out
似乎折叠为 (.80 - .25) 的不透明度或仅为 .25,而不是返回到 .80。这就是为什么我决定从我的 #header-out
中删除 CSS,而是尝试在 jquery 代码中使用它。
最后说明:
html结构如下:
<div id="header-out">
<div id="header-in">
Content
</div>
</div>
CSS 是:
#header-out {
width:100%;
height:75px;
position:fixed;
top:0;
left:0;
z-index:999;
cursor: pointer;
}
#header-in {
width:90%;
margin:0 auto;
padding:0;
}
- 我想在
#header-in
中包含我的 Logo 和菜单。 - 我希望标题 DIV 展开后可以看到更多内容。
最佳答案
您可以在现代浏览器中使用过渡在 CSS 本身中完成此操作。你可以查看that here所有浏览器都支持转换。
#header-out {
width:100%;
height:75px;
position:fixed;
top:0;
left:0;
z-index:999;
cursor: pointer;
background: rgba(125,135,105,.25);
transition: all 0.6s linear;
}
#header-out:hover {
transition: all 0.6s linear;
background: rgba(45,65,135,.80);
height: 400px;
color: #fff;
}
关于javascript - jquery div扩展背景颜色不透明度变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27747299/