Fading in and out divs with css

Question

http://jsfiddle.net/LJdAU/

    -o-transition:color .3s ease-out, background .5s ease-in-out;
    -ms-transition:color .3s ease-out, background .5s ease-in-out;
    -moz-transition:color .3s ease-out, background .5s ease-in-out;
    -webkit-transition:color .3s ease-out, background .5s ease-in-out;
    transition:color .3s ease-out, background .5s ease-in-out;

I am trying to fade in and out a div object. See the fiddle. I made the fade especially long to see the problem.

The menu items (canada, germany, etc) on rollover works fine (that is fades in) , but on rollout it does not fade out.

can someone spot the error?

thanks!

LINES 40-47 css code is where the transition code it located :)

Answer 1

The reason your transition is cutting out like that is because you have the transition only on the :hover, what you've got to do is actually move that onto the selector you want to transition, so:

.collapsible, .page_collapsible {
    margin: 0;
    padding:8px;
    height:20px;
    border-top:#2b2b2b 1px solid;
    border-left:#2b2b2b 1px solid;
    border-right:#2b2b2b 1px solid;
    border-bottom:#2b2b2b 0px solid;
    background: black;
    font-family: Lato;
    text-decoration:none;
    text-transform:uppercase;
    color: #fff;
    font-size:1em;
    -o-transition:color .3s ease-out, background .5s ease-in-out;
  -ms-transition:color .3s ease-out, background .5s ease-in-out;
  -moz-transition:color .3s ease-out, background .5s ease-in-out;
  -webkit-transition:color .3s ease-out, background .5s ease-in-out;
  transition:color .3s ease-out, background .5s ease-in-out;
}

Here is the updated fiddle: http://jsfiddle.net/LJdAU/1/