CODEWITHSUNDEEP
jquerycsscss-transitions
Jamie
Jamie

Reputation: 333

Applying animation through jquery class change

I'm trying to create a sticky css menu which becomes semi-transparent to allow the text to be seen through it. I've added a :hover {opacity:1;} to make it opaque when the user hovers over the menu, however, its quite a 'course' change; it would be great to animate these transitions, both when first going transparent and then when going back to opaque.

The way I've made it work is by using jquery to add a fixed class to the body tag when the window position is beyond the height of my header div. You can see it in action here.

I assume the hover transition is a css3 animation, but I haven't been able to get it to work so far. The initial transition caused by adding the class - I don't even know where to start!

Any help would be appreciated.

Solution CSS3 solution taken and modified from the answer marked below. I moved the transition effect from .fixed header nav to header nav. This results in the animation working when the fixed class is added or removed. Updated solution here: Fiddle

Upvotes: 1

Views: 157

Answers (3)

Ejaz
Ejaz

Reputation: 8872

you can modify the specific part of your CSS to 

.fixed
{
    header nav
    {
        transition: 0.5s opacity;
        -webkit-transition: 0.5s opacity;
        -moz-transition: 0.5s opacity;
        position:fixed;
        top:0px;
        opacity:0.6;
        width:100%;
        &:hover{opacity:1;}
    }
}

see this fiddle for demonstration

Upvotes: 0

DarkAjax
DarkAjax

Reputation: 16223

You can combine jQuery's .hover() and .animate() methods to do this:

$('header').hover(function(){
   $(this).animate({
    opacity: 1 }, 1000);
}, function(){
    $(this).animate({
    opacity: 0.6 }, 1000);
});

Jsfiddle example

Upvotes: 0

Mooseman
Mooseman

Reputation: 18891

CSS:

body.fixed nav{
    position:fixed;
    top:0px;
    opacity:0.6;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
    width:100%;
}
body.fixed nav:hover{
    opacity:1;
    transition: 1s opacity;
    -webkit-transition: 1s opacity;
    -moz-transition: 1s opacity;
}

Fiddle: http://jsfiddle.net/sTCqq/1/

Upvotes: 1

Related Questions