悬停的反弹效果 <ul> 在其中被观察到 <li> 儿童元素也是如此

Question

OK, So after a lot of stress and coffee I came with this code to show some bounce effect on child elements of by hovering over the link. And on moving the mouse away from the link the child elements hide after a delay of 4 secs. This 4 sec delay was introduced because after hovering over the link people tend to immediately hover the mouse over the dropped down menu and because of the bounce effect a gap was getting created between the and

elements and when you hover over the gap the dropped menu disappears so visitors on the website wont know that they have to wait for the bounce to stop to hover over the menu so I introduced delay of 4 secs. Now the problem is that when I immediately try to move the mouse on the dropped menu the bounce effect reproduces itself on the child elements, I mean the bounce effect takes place twice, this happens only by immediately hovering over the dropped menu specially trying to hover over the first option in the menu. So this looks ugly and at the same time shows poor coding, Is there a way to stop this from happening. And I also wanted to know that is there a way to toggle visibility using jQuery, I cannot use display option and I also cannot use removeClass function. I know, might sound little stringent criteria but to maintain the smoothness of rest of my code i need to take care of above two things. DEMO

HTML Code:

 <div id="menu"> <ul class="menu" id="tempMenu"> <li class="listOfNumbers"> <a id="Menus" href="">Numbers</a> <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> </li> </ul> </div>​ 

CSS Code

 ul { margin:0; padding:0; width:0; } ul li { height: 30px; line-height: 30px; list-style: none; } ul.menu li a { padding:0; width:90px; display:block; color: #fff; font-size: 12px; font-weight: bolder; text-shadow: #000 0 -1px 1px; text-decoration: none; text-align: center; border-top: 1px solid #666; border-left: 1px solid #666; border-right: 1px solid #000; border-bottom: 1px solid #000; box-shadow: white 7px 5px 20px; /* W3 Standarts */ -o-box-shadow: white 7px 5px 20px; /* Opera */ -ms-box-shadow: white 7px 5px 20px; /* IE 10+ */ -moz-box-shadow: white 7px 5px 20px; /* Firefox */ -webkit-box-shadow:white 7px 5px 20px; /* Webkit */ transition: text-shadow .7s ease-out, background .7s ease-out; /* W3 Standarts */ -o-transition: text-shadow .7s ease-out, background .7s ease-out; /* Opera */ -ms-transition: text-shadow .7s ease-out, background .7s ease-out; /* IE 10+ */ -moz-transition: text-shadow .7s ease-out, background .7s ease-out; /* Firefox */ -webkit-transition: text-shadow .7s ease-out, background .7s ease-out; /* Webkit */ 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%); 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%); /* Webkit */ 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)) ); /* Opera */ background: #666 -o-gradient( linear, left bottom, left top, color-stop(0.3, rgb(00,00,00)), color-stop(0.9, rgb(80,80,80)) ); /* IE 10+ */ 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%); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); } ul.menu .listOfNumbers { margin:15px 0 0 20px; } ul.menu li .submenu { top:30px; visibility:hidden; } ul.menu li:hover .submenu { visibility:visible; animation:mymove 1.2s linear; /* W3 Standart */ -o-animation:mymove 1.2s linear; /* Opera */ -ms-animation:mymove 1.2s linear; /* IE 10+ */ -moz-animation:mymove 1.2s linear; /* Firefox */ -webkit-animation:mymove 1.2s linear; /* Safari and Chrome */ } ul.menu li:not(:hover) .submenu { top:30px; opacity:0; transition:opacity 1.2s linear 3s, visibility 1.2s linear 3s; /* W3 Standart */ -o-transition:opacity 1.2s linear 3s, visibility 1.2s linear 3s; /* Opera */ -ms-transition:opacity 1.2s linear 3s, visibility 1.2s linear 3s; /* IE 10+ */ -moz-transition:opacity 1.2s linear 3s, visibility 1.2s linear 3s; /* Firefox */ -webkit-transition:opacity 1.2s linear 3s, visibility 1.2s linear 3s; /* Safari and Chrome */ } @keyframes mymove { 0% {opacity:0.1;margin-top:0px;} 10% {opacity:0.3;margin-top:25px;} 30% {opacity:0.4;margin-top:50px;} 60% {opacity:0.5;margin-top:25px;} 80% {opacity:0.7;margin-top:50px;} 90% {opacity:0.9;margin-top:35px;} 95% {opacity:0.95;margin-top:25px;} 100% {opacity:1;margin-top:0px;} } /* Opera */ @-o-keyframes mymove { 0% {opacity:0.1;margin-top:0px;} 10% {opacity:0.3;margin-top:25px;} 30% {opacity:0.4;margin-top:50px;} 60% {opacity:0.5;margin-top:25px;} 80% {opacity:0.7;margin-top:50px;} 90% {opacity:0.9;margin-top:35px;} 95% {opacity:0.95;margin-top:25px;} 100% {opacity:1;margin-top:0px;} } /* IE 10+ */ @-ms-keyframes mymove { 0% {opacity:0.1;margin-top:0px;} 10% {opacity:0.3;margin-top:25px;} 30% {opacity:0.4;margin-top:50px;} 60% {opacity:0.5;margin-top:25px;} 80% {opacity:0.7;margin-top:50px;} 90% {opacity:0.9;margin-top:35px;} 95% {opacity:0.95;margin-top:25px;} 100% {opacity:1;margin-top:0px;} } /* Firefox */ @-moz-keyframes mymove { 0% {opacity:0.1;margin-top:0px;} 10% {opacity:0.3;margin-top:25px;} 30% {opacity:0.4;margin-top:50px;} 60% {opacity:0.5;margin-top:25px;} 80% {opacity:0.7;margin-top:50px;} 90% {opacity:0.9;margin-top:35px;} 95% {opacity:0.95;margin-top:25px;} 100% {opacity:1;margin-top:0px;} } /* Safari and Chrome */ @-webkit-keyframes mymove { 0% {opacity:0.1;margin-top:0px;} 10% {opacity:0.3;margin-top:25px;} 30% {opacity:0.4;margin-top:50px;} 60% {opacity:0.5;margin-top:25px;} 80% {opacity:0.7;margin-top:50px;} 90% {opacity:0.9;margin-top:35px;} 95% {opacity:0.95;margin-top:25px;} 100% {opacity:1;margin-top:0px;} } ul.menu .submenu li a { -webkit-border-top-left-radius:0px; -webkit-border-bottom-left-radius:0px; -webkit-border-top-right-radius:0px; -webkit-border-bottom-right-radius:0px; -moz-border-top-left-radius: 0px; -moz-border-radius-bottomleft:0px; -moz-border-top-right-radius: 0px; -moz-border-radius-bottomright: 0px; /* margin: 68px 95px; */ z-index: 1000; } 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; -webkit-border-top-right-radius:2px; -webkit-border-bottom-right-radius:10px; -moz-border-top-left-radius: 2px; -moz-border-radius-bottomleft: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; }​ 

Answer 1

How about animating the parent as well - something like:

ul.menu > li:hover  {
    visibility:visible;
    animation:parentmove 1.2s linear; /* W3 Standart */
    -moz-animation:parentmove 1.2s linear; /* Firefox */
    -webkit-animation:parentmove 1.2s linear; /* Safari and Chrome */
}

@keyframes parentmove
{
    0%   {padding-bottom:5px;}
    10%  {padding-bottom:30px;}
    30%  {padding-bottom:55px;}
    60%  {padding-bottom:30px;}
    80%  {padding-bottom:55px;}
    90%  {padding-bottom:40px;}
    95%  {padding-bottom:30px;}
    100% {padding-bottom:5px;}
}

http://jsfiddle.net/kGqRM/187/

where padding is added to the bottom of the parent at the same rate as the submenu is moved

Unfortunately this means that the li has to be a block element and floated left (so that the element is actually rendered properly - if you currently inspect your li it seems to be all squished to the left which is why you are leaving it when you try to go onto the child)