javascript - 延迟 CSS 转换 2 秒

标签 javascript jquery html css

好的 所以我创建了一个按钮，当悬停在它上面时会显示一个菜单。一旦鼠标从按钮上移开，菜单就会隐藏。这是完美的，但是当我从鼠标移到菜单本身时，菜单不应该消失。这也发生了，但我使用 css 创建了一个反弹效果，使它更时尚一点，如果我试图在动画发生之前将鼠标悬停在菜单上，菜单会再次隐藏，因为菜单之间有间隙和按钮在弹跳 Action 期间，所以我想延迟隐藏 2 秒，这样即使有人按下按钮并试图在菜单上移动，它也应该至少等待 2 秒才能消失。 Link to fiddle

HTML 代码

<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>
​

CSS 代码:

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;

}​

我不知道是否需要涉及 javascript 或 jQuery。但是，如果使用它们中的任何一个都可以实现，那么也很好。

最佳答案

也许你想要transition-delay:https://developer.mozilla.org/en-US/docs/CSS/transition-delay

编辑:

You may specify multiple delays; each delay will be applied to the corresponding property as specified by the transition-property property, which acts as a master list. If there are fewer delays specified than in the master list, missing values are set to the initial value (0s). If there are more delays, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

关于javascript - 延迟 CSS 转换 2 秒，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14089693/

上一篇：html - 同一页面中有许多 FACEBOOK 分享按钮？

下一篇：javascript - jquery animate with css float

相关文章：

javascript - 无法让 JavaScript 触发的 css 淡入淡入

javascript - RTCDataChannel send() 是同步/阻塞调用吗？

javascript - JQuery Mobile 错误

javascript - JavaScript 和 jQuery 选择器的浏览器兼容性问题

javascript - 我如何在 JSP 中使用 JavaScript 的 session 存储？

javascript - 为什么 JSX 将空格解析为子项

jquery - 筹款温度计方法

jquery - 使用 jQuery 设置 div 背景图片 url

javascript - 如何缩小大于 100MB 的 Javascript 文件？

php - jQuery:使用动态添加的按钮删除最接近的 <tr>

©2024 IT工具网  联系我们