JQuery DIV развернуть с Backgroud цвета изменения непрозрачности

Question

Используется JQuery Lib:

<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> 

Проблема, которую я имею, что фон непрозрачности не задерживается вместе с расширение.

Моя цель состоит в том, чтобы изменить непрозрачность от 0,25 до 0,80, поскольку div расширяется, а не прыгает с 0,25 до 0,80 мгновенно. И я хотел бы, чтобы непрозрачность .80 вернулась к .25, когда div сваливается, а не сразу, когда мышь удаляется.

Я не уверен, является ли этот код лучшим кодом, который будет использоваться для того, что я намереваюсь делать.

Общая цель состоит в том, чтобы иметь заголовок, который расширяется при наведении курсора мыши/наведении вместе с изменением непрозрачности фона.

---

Другие методы, которые я пробовал:

Сначала я начал с приданием #header-out Backgroud с помощью CSS:

#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) или всего 0,25 вместо возврата к 0,80. Вот почему я решил удалить CSS из моего #header-out и вместо этого попытаюсь использовать его в коде 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.
• Я хотел бы, чтобы больше содержимого стало видимым после расширения заголовка 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

Answer 2

$(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