1

我创建了一个 CSS3 菜单项，我想以articles一种特殊的方式显示该项目：如果你点击第 4 个项目，它应该显示第一个，然后是第二个，然后是第三个，它们之间有一个小的延迟，比如 0.5s .

同样，如果您单击第二个，它应该会在一小段延迟后弹出第一个和第二个。

它应该很好&光滑:)

好吧，现在它仍然不是我想要实现的（这里是我得到的实时版本http://jsfiddle.net/vH4DV/4/）

你认为我只能用 CSS3 做到这一点吗？我应该使用 Jquery 吗？

谢谢你的帮助 ！

编辑

终于搞定了，这里是最终的live版本http://jsfiddle.net/vH4DV/21/

4

1 回答 1

3

http://jsfiddle.net/derekstory/vH4DV/19/

Instead of: 

   .ac-container input:checked ~ article{  
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    }

Be more specific for your transitions. 

.ac-container input:checked ~ .how{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    transition-delay: .3s;
    -webkit-transition-delay: .3s;
    opacity:1;
}

.ac-container input:checked ~ .About{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
}
.ac-container input:checked ~ .references{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .6s;
    -webkit-transition-delay: .6s;
}
.ac-container input:checked ~ .contact{
    height: 140px;
    -webkit-transition: all linear .25s;
    -moz-transition: all linear .25s;
    -o-transition: all linear .25s;
    -ms-transition: all linear .25s;
    transition: all linear .25s;
    opacity:1;
    transition-delay: .9s;
    -webkit-transition-delay: .9s;
}
于 2013-06-27T14:29:40.393 回答