使用 CSS 淡入淡出 div

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;

我正在尝试淡入和淡出 div 对象。见小提琴。我把淡入淡出的时间特别长，才能看到问题所在。

菜单项（加拿大、德国等）在翻转时工作正常（即淡入），但在推出时不会淡出。

有人能发现错误吗？

thanks!

第 40-47 行 css 代码是转换代码所在的位置:)

你的转换被剪掉的原因是因为你只在 :hover 上进行转换，你要做的实际上是将其移动到你想要转换的选择器上，所以：

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

这是更新的小提琴：http://jsfiddle.net/LJdAU/1/