Javascript 将CSS转换延迟2秒
好的,我创建了一个按钮,当鼠标悬停在上面时,它会显示一个菜单。一旦鼠标离开按钮,菜单就会隐藏。这很完美,但当我从鼠标移到菜单本身时,菜单不应该消失。这也在发生,但我已经使用css创建了一个反弹效果,使其更加时尚,如果我在动画发生之前尝试将鼠标悬停在菜单上,菜单将再次隐藏,因为在反弹操作期间菜单和按钮之间存在间隙,所以我想将隐藏延迟2秒,所以,即使有人按下按钮并试图在菜单上移动,它也应该在消失前至少等待2秒 HTML代码Javascript 将CSS转换延迟2秒,javascript,jquery,html,css,Javascript,Jquery,Html,Css,好的,我创建了一个按钮,当鼠标悬停在上面时,它会显示一个菜单。一旦鼠标离开按钮,菜单就会隐藏。这很完美,但当我从鼠标移到菜单本身时,菜单不应该消失。这也在发生,但我已经使用css创建了一个反弹效果,使其更加时尚,如果我在动画发生之前尝试将鼠标悬停在菜单上,菜单将再次隐藏,因为在反弹操作期间菜单和按钮之间存在间隙,所以我想将隐藏延迟2秒,所以,即使有人按下按钮并试图在菜单上移动,它也应该在消失前至少等待2秒 HTML代码 <div id="menu"> <
<div id="menu">
<ul class="menu" id="tempMenu">
<li class="listOfNumbers"><a id="Menus" href="">Numbers</a><div>
<ul class="submenu">
<li>
<a id="one" href="">one</a>
</li>
<li>
<a id="two" href="">two</a>
</li>
<li>
<a id="three" href="">three</a>
</li>
<li>
<a id="four" href="">four</a>
</li>
<li>
<a id="five" href="">five</a>
</li>
<li>
<a id="six" href="">six</a>
</li>
<li>
<a id="seven" href="">seven</a>
</li>
<li>
<a id="eight" href="">eight</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
我不知道是否需要使用javascript或jQuery。但是,如果使用它们中的任何一个都可以实现,那么也可以 也许您想要
转换延迟
:
编辑:
ul.menu .listOfNumbers{
position: fixed;
margin-left: 20px;
list-style-type: none;
margin: 15px 0;
float: left;
height: 30px;
line-height: 30px;
}
ul.menu .listOfNumbers a{
position: fixed;
margin-left: 93px;
background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
display: block;
padding: 0;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
width: 90px;
text-align: center;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #000;
-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
-moz-transition: text-shadow .7s ease-out, background .7s ease-out;
-moz-box-shadow: white 7px 5px 20px;
-webkit-box-shadow:white 7px 5px 20px;
box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
display: none;
top: -30px;
position: absolute;
opacity: 0;
}
ul.menu .submenu li{
list-style-type: none;
}
ul.menu li:hover .submenu{
display: block;
top: -2px;
opacity: 1;
animation:mymove 1.2s linear;
-moz-animation:mymove 1.2s linear; /* Firefox */
-webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
-o-animation:mymove 1.2s linear; /* Opera */
-ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-ms-keyframes mymove /* IE */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
ul.menu .submenu li:first-child a{
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:2px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:2px;
-moz-border-top-left-radius: 10px;
-moz-border-radius-bottomleft:2px;
-moz-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 2px;
border-top-left-radius: 10px;
border-bottom-left-radius:2px;
border-top-right-radius: 10px;
border-bottom-right-radius:2px;
margin: 34px 95px;
z-index: 1000;
}
ul.menu .submenu li:last-child a{
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:10px;
-moz-border-top-left-radius: 2px;
-moz-border-radius-bottomleft:10px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:10px;
-moz-border-top-right-radius: 2px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 2px;
border-bottom-left-radius:10px;
border-top-right-radius: 2px;
border-bottom-right-radius:10px;
margin:260px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(2) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 68px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(3) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 100px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(4) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 133px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(5) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 165px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(6) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 197px 95px;
z-index: 1000;
}
ul.menu .submenu li:nth-of-type(7) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
margin: 229px 95px;
z-index: 1000;
}
您可以指定多个延迟;每个延迟将应用于transition属性指定的相应属性,该属性充当主列表。如果指定的延迟少于主列表中的延迟,则缺少的值将设置为初始值(0s)。如果有更多的延迟,列表只会被截断到正确的大小。在这两种情况下,CSS声明都保持有效
看看这个
它说,您可以在任何时候指定一个转换,可以有多个转换,还可以用CSS3做更多的事情。请仔细阅读本教程,它将对您有很大帮助。jsfiddle
CSS的主要变化:
但它不会延迟外观、反弹和不透明度。整个运作将陷入混乱。但是感谢你的帮助。投赞成票。我明白你的意思,我也试过了,但由于某种原因,它似乎不起作用,我不知道我做错了什么,你能帮我纠正一下吗。显然,转换在显示属性上不起作用,所以我使用了可见性;-)但它会延迟菜单的显示,但不会延迟隐藏。那么,我怎样才能扭转结果呢。两秒钟后立即显示和隐藏。我认为您的子菜单顶部应该与主菜单按钮重叠一些像素(这是完成模拟的情况)。此外,您应该显示(
display:block
)一个未激活的子菜单包装器(例如ul.子菜单的父div
),并在不考虑可见性的情况下执行动画(例如ul.子菜单上)。所以包装不会被隐藏,因为你把鼠标移出了“敏感”区域。@最后试试抓捕是的,听起来是个好主意。谢谢。动画应该从:hover开始当然(但独立于包装可见性)。我认为标题应该更具描述性,比如“悬停子菜单的延迟动画”等等,以表达悬停元素动画的困境。非常感谢兄弟,但我这一行有很多菜单,我知道我没有在自己的提琴或问题中发布它,但我不能增加div宽度并在那里应用o=hover事件。我唯一的选择是将隐藏事件延迟3-4秒。但是我感谢你的帮助。。向上投票。。
ul.menu .listOfNumbers{
position: relative;
margin-left: 20px;
list-style-type: none;
margin: 15px 0;
float: left;
line-height: 30px;
z-index: 1000;
}
ul.menu .listOfNumbers a{
margin-left: 93px;
background: #666 -webkit-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) );
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(17,17,17,1) 60%, rgba(0,0,0,1) 77%, rgba(19,19,19,1) 91%);
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(17,17,17,1) 60%,rgba(0,0,0,1) 77%,rgba(19,19,19,1) 91%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
display: block;
padding: 0;
text-decoration: none;
color: #fff;
font-size: 12px;
font-weight: bolder;
text-shadow: #000 0 -1px 1px;
width: 90px;
text-align: center;
border-bottom: 1px solid #000;
border-top: 1px solid #666;
border-left: 1px solid #666;
border-right: 1px solid #000;
-webkit-transition:text-shadow .7s ease-out, background .7s ease-out;
-moz-transition: text-shadow .7s ease-out, background .7s ease-out;
-moz-box-shadow: white 7px 5px 20px;
-webkit-box-shadow:white 7px 5px 20px;
box-shadow: white 7px 5px 20px;
}
ul.menu .submenu{
display: none;
top: -30px;
position: absolute;
/*opacity: 0;*/
}
ul.menu .submenu li{
list-style-type: none;
}
ul.menu li:hover .submenu{
display: block;
top: -2px;
/*opacity: 1;*/
animation:mymove 1.2s linear;
-moz-animation:mymove 1.2s linear; /* Firefox */
-webkit-animation:mymove 1.2s linear; /* Safari and Chrome */
-o-animation:mymove 1.2s linear; /* Opera */
-ms-animation:mymove 1.2s linear; /* IE */
}
@keyframes mymove
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
@-ms-keyframes mymove /* IE */
{
0% {top:-10px;opacity:0.1;}
10% {top:3px;opacity:0.3;}
30% {top:40px;opacity:0.4;}
60% {top:-5px;opacity:0.5;}
80% {top:20px;opacity:0.7;}
90% {top:10px;opacity:0.9;}
95% {top:5px;opacity:0.95;}
100% {top:3px;opacity:1;}
}
ul.menu .submenu li:first-child a{
-webkit-border-top-left-radius:10px;
-webkit-border-bottom-left-radius:2px;
-webkit-border-top-right-radius:10px;
-webkit-border-bottom-right-radius:2px;
-moz-border-top-left-radius: 10px;
-moz-border-radius-bottomleft:2px;
-moz-border-top-right-radius: 10px;
-moz-border-radius-bottomright: 2px;
border-top-left-radius: 10px;
border-bottom-left-radius:2px;
border-top-right-radius: 10px;
border-bottom-right-radius:2px;
margin: 35px 93px 0;
}
ul.menu .submenu li:last-child a{
-webkit-border-top-left-radius:2px;
-webkit-border-bottom-left-radius:10px;
-moz-border-top-left-radius: 2px;
-moz-border-radius-bottomleft:10px;
-webkit-border-top-right-radius:2px;
-webkit-border-bottom-right-radius:10px;
-moz-border-top-right-radius: 2px;
-moz-border-radius-bottomright: 10px;
border-top-left-radius: 2px;
border-bottom-left-radius:10px;
border-top-right-radius: 2px;
border-bottom-right-radius:10px;
}
ul.menu .submenu li:nth-of-type(2) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(3) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(4) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(5) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(6) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}
ul.menu .submenu li:nth-of-type(7) a{
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-top-left-radius: 0px;
-moz-border-radius-bottomleft:0px;
-webkit-border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-top-right-radius: 0px;
-moz-border-radius-bottomright: 0px;
}