延迟CSS转换2秒

时间：2012-12-30 09:32:25

标签： javascript jquery html css

好的所以我创建了一个按钮，显示悬停在其上的菜单。一旦鼠标离开按钮，菜单就会被隐藏。这是完美的，但当我从鼠标移动到菜单本身时，菜单不应该消失。这也正在发生，但是我使用css创建了一个弹跳效果，使其更加时尚，如果我在动画发生之前尝试将鼠标悬停在菜单上，菜单会再次隐藏，因为菜单之间存在差距在弹跳动作期间按钮和按钮，所以我想延迟隐藏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需要什么。但是如果使用它们中的任何一个都可以实现，那么它也可以。

3 个答案:

答案 0 :(得分：3)

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

修改

  

您可以指定多个延迟;每个延迟都将应用于transition-property属性指定的相应属性，该属性充当主列表。如果指定的延迟少于主列表中的延迟，则将缺失值设置为初始值（0s）。如果有更多延迟，则只需将列表截断为正确的大小。在这两种情况下，CSS声明都保持有效。

答案 1 :(得分：1)

jsfiddle http://jsfiddle.net/sP5hg/6/ 

    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;

}

主要的CSS更改：

  1. 将LI的位置更改为亲属，并移除其子女的位置，以便LI的大小将包括其所有孩子;这个步骤很关键，因为它会使li：hover始终工作，即使鼠标可以移出链接“Numbers”;
  2. 在LI而不是子菜单上应用z-index，我担心这应该更合理，因为我们希望整个菜单应该在最前面;

答案 2 :(得分：-1)

查看此W3School explaination

它表示您可以随时指定转换，具有多个转换，以及使用CSS3可以执行的更多操作。请仔细阅读教程，它会对你有所帮助。

相关问题
最新问题