Question

我正在制作菜单必须看起来像是什么开头：悬停。

问题在于开启和关闭动画时延迟动画子元素。

CSS代码：

#menu ul ul {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transform: rotateX(-90deg); 
transform-origin: top;}

#menu ul li{
perspective: 1000px;}

#menu ul li:hover ul {
height:180px;
transform: rotateX(-25deg);}

HTML代码

<div id="menu">
<ul >
<li><a href="">level 1</a>
<ul>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
</ul></li>
<li><a href="">level 1</a>
<ul>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
<li><a href="">level 2</a></li>
</ul></li>
</ul>  
</div>

Answer 1

将此添加到您的身体：

<div id="menu">MENU</div>
<div id="flap"></div>

然后，在文件的HEAD中，键入以下内容：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/ui/1.8.18/jquery-ui.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {

   $("#menu").hover(
function() {


  $("#flap").animate({
    height: '+=200'
    }, '0'
);
},

function() {


  $("#flap").animate({
    height: '-=200',
    }, '0'
  );
}
);

});
</script>

这是CSS如下：

#menu {
width:100%;
position:relative;
height:75px;
background-color:black;
font-family:sans-serif;
font-size:16pt;
text-align:center;
color:white;
line-height:75px;
}

#flap {
width:100%;
position:relative;
background-color:red;
height:0px;

}

让我知道它是否成功了！在#flap中，您可以制作要拍打的菜单。

当接近的css 3d元素时，动画延迟儿童元素

1 个答案: