jquery div expand with background color opacity change

Question

Used jQuery lib:

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>

I have this jquery code:

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

The issue I am having is that the background opacity is not delayed along with the expand.

My goal is to have the opacity change from .25 to .80 as the div expands instead of jumping from .25 to .80 instantly. And I would like for the .80 opacity to return to .25 when the div collapses and not immediately when mouse is removed.

I'm not sure if this code is the best code to be used for what I am intending to do.

The overall goal is to have a header that expands on mouseover/hover along with a background opacity change.

Other methods I've tried:

At first I began with giving #header-out a backgroud using CSS:

#header-out {
   background: rgba(255,255, 255, .25);
}

And the jquery code I used is as follows:

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

The problem I found with the above method was that the page would load with #header-out at an opacity of .25. After the hover, #header-out seemed to collapse to an opacity of (.80 - .25) or just .25 instead of returning to .80. Which is why I decided to remove the CSS from my #header-out and instead try using it in the jquery code.

Final note:

The html structure is as follows:

<div id="header-out">
   <div id="header-in">
     Content 
   </div>
</div>

And the CSS is:

#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;
}

I would like to have my logo and menu within #header-in.
I would like more content to become visible once the header DIV expands.

Thank you for the edit Mardzis. – SomeDude Jan 02 '15 at 20:04 — SomeDude, Jan 02 '15 at 20:04

score 1 · Accepted Answer · answered Jan 02 '15 at 19:22

You can do this in CSS itself using transitions in modern browsers. You can check that here which all browsers support transitions.

#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

Thanks anpsmn. I think this might be a better solution than using jquery. Would "transition" work on most browsers? — SomeDude, Jan 02 '15 at 20:02

Mohamed-Yousef · Answer 2 · 2015-01-02T19:24:25.453

0

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

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

});
});

see DEMO

edited Jan 02 '15 at 19:24

answered Jan 02 '15 at 19:18

Mohamed-Yousef

23,946
3
19
28

Thanks Mohamed. The issue with using opacity and not RGBA is that all elements in the DIV share the opacity change. I need only for the background to change opacity. – SomeDude Jan 02 '15 at 19:50
@SomeDude http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor this is for backgroundColor using jquery .. see anpsmn answer as well .. good luck :) – Mohamed-Yousef Jan 02 '15 at 20:05

jquery div expand with background color opacity change

2 Answers2