javascript - jquery div扩展背景颜色不透明度变化

Question

使用的 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 展开后可以看到更多内容。

Answer 1

您可以在现代浏览器中使用过渡在 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;
}

See fiddle