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。我希望在 div 折叠时将 .80 不透明度变为 return 到 .25，而不是在移除鼠标时立即。

我不确定这段代码是否是用于我打算做的事情的最佳代码。

总体目标是 header 在 mouseover/hover 上扩展，同时改变背景不透明度。

我尝试过的其他方法：

起初我使用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>

我用上述方法发现的问题是页面加载 #header-out 不透明度为 .25。悬停后，#header-out 似乎塌缩为 (.80 - .25) 的不透明度或仅为 .25 而不是 return 变为 .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 中显示我的徽标和菜单。
我希望 header DIV 扩展后可以看到更多内容。

Answer 1

$(document).ready(function(){
$('#header-out').hover(function() {
    $(this).stop().animate({
        'opacity':'.80',
        'height': '400px'
    }, 800);

}, function() {
    $(this).stop().animate({
        'opacity':'.25',
        'height': '70px'
    }, 800);

});
});

见DEMO

Answer 2

您可以在 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

jquery div 随着背景颜色不透明度的变化展开

jquery div expand with background color opacity change

html

javascript

css

jquery