HTML弹跳效果

-3

我有这样的HTML代码：HTML弹跳效果

<!doctype html> 
    <html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <link rel="stylesheet" href="navbar.css" type="text/css"> 
    </head> 

    <body><div class="AJXCSSMenuGAbaaTB"><!-- AJXFILE:navbar.css --> 
    <ul class="sub"> 
    <li><a href="http://www.gigabyte.heliohost.org/" title="Home"><b>Home</b></a></li> 
    <li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/about" title="About Us &amp; Contact Information"><b>About</b></a> 
     <ul> 
     <li class="sfirst slast"><a href="http://www.fb.fan.page.gigabyte.heliohost.org/" title="Like GigaByte on Facebook">Facebook Page</a></li> 
     </ul> 
    </li> 
    <li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/tools/"><b>Tools</b></a> 
     <ul> 
     <li class="sfirst"><h1>Online</h1></li> 
     <li><h1>Backyard Monsters</h1></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bm-icalc/" title="Backyard Monsters Inferno Base Health Calculator">Inferno Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bm-calc/" title="Backyard Monsters Main Base Health Calculator">Main Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bm-opcalc/" title="Backyard Monsters Outpost Base Health Calculator">Outpost Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/bmlist/" title="Update List for Backyard Monsters ">Update List</a></li> 
     <li><h1>War Commander</h1></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/wc-calc/" title="War Commander Main Base Health Calculator">Main Base Health Calculator</a></li> 
     <li><a href="http://www.gigabyte.heliohost.org/tools/wclist/" title="Update List for War Commander">Update List</a></li> 
     <li><h1>Offline</h1></li> 
     <li class="slast"><a href="http://www.gigabyte.heliohost.org/tools/offdl/">Downloads</a></li> 
     </ul> 
    </li> 
    <li><a class="ajxsub" href="http://www.gigabyte.heliohost.org/help/" title="Help"><b>Help</b></a> 
     <ul> 
     <li class="sfirst slast"><a href="http://www.gigabyte.heliohost.org/help/faq/" title="Frequently Asked Questions">F.A.Q.</a></li> 
     </ul> 
    </li> 
    </ul> 
    <br > 
    </div> 
    </body> 
    </html>

和CSS代码：

.AJXCSSMenuGAbaaTB {position:relative;margin:0 auto;z-index:100;width:590px;height:52px;text-align:center;} 
    .AJXCSSMenuGAbaaTB ul {position:relative;display:inline-block;margin:0;padding:0;list-style-type:none;} 
    * html .AJXCSSMenuGAbaaTB ul {display:inline;} 
    *+html .AJXCSSMenuGAbaaTB ul {display:inline;} 
    .AJXCSSMenuGAbaaTB li {float:left;margin:0;} 
    .AJXCSSMenuGAbaaTB li:hover,.AJXCSSMenuGAbaaTB .ajxover {position:relative;} 
    .AJXCSSMenuGAbaaTB ul ul h1 {width:184px;padding:5px 8px 5px 8px;margin:0;font:bold 14px/14px Arial,Helvetica,sans-serif;text-decoration:none;text-align:center;color:#000000;background:#ffffff;} 
    .AJXCSSMenuGAbaaTB ul ul .sfirst h1 {margin-top:4px;} 
    .AJXCSSMenuGAbaaTB a {display:block;float:left;height:52px;white-space:nowrap;overflow:hidden;padding:0 0 0 16px;font:18px/52px Arial,Helvetica,sans-serif;text-decoration:none;text-align:center;color:#ffffff;background:#3c3c3c url(navbar_files/top.gif) no-repeat top left;} 
    .AJXCSSMenuGAbaaTB a b {display:block;padding:0 22px 0 0;font-weight:normal;background:url(navbar_files/top.gif) no-repeat top right;} 
    .AJXCSSMenuGAbaaTB li:hover a,.AJXCSSMenuGAbaaTB .ajxover a {background:#ff6600 url(navbar_files/top.gif) no-repeat bottom left;} 
    .AJXCSSMenuGAbaaTB li:hover a b,.AJXCSSMenuGAbaaTB .ajxover a b {background:url(navbar_files/top.gif) no-repeat bottom right;} 
    .AJXCSSMenuGAbaaTB a.ajxsub {background:#3c3c3c url(navbar_files/top-sub.gif) no-repeat top left;} 
    .AJXCSSMenuGAbaaTB a.ajxsub b {background:url(navbar_files/top-sub.gif) no-repeat top right;} 
    .AJXCSSMenuGAbaaTB li:hover a.ajxsub,.AJXCSSMenuGAbaaTB .ajxover a.ajxsub {background:#ff6600 url(navbar_files/top-sub.gif) no-repeat bottom left;} 
    .AJXCSSMenuGAbaaTB li:hover a.ajxsub b,.AJXCSSMenuGAbaaTB .ajxover a.ajxsub b {background:url(navbar_files/top-sub.gif) no-repeat bottom right;} 
    .AJXCSSMenuGAbaaTB ul ul {position:absolute;left:-9999px;top:-9999px;width:208px;height: auto;display:inline-block;float:none;margin:0;background:#ff6600 url(navbar_files/sub-bg.gif) right center;} 
    .AJXCSSMenuGAbaaTB ul :hover ul,.AJXCSSMenuGAbaaTB ul .ajxover ul {left:-4px;top:52px;} 
    .AJXCSSMenuGAbaaTB li li {width:200px;padding:0 4px 0px 4px;} 
    .AJXCSSMenuGAbaaTB li li.slast {padding-bottom:4px;} 
    .AJXCSSMenuGAbaaTB ul ul a,.AJXCSSMenuGAbaaTB ul :hover ul a,.AJXCSSMenuGAbaaTB ul .ajxover ul a {float:none;margin:0;width:172px;height:auto;white-space:normal;padding:5px 8px 5px 20px;font:14px/14px Arial,Helvetica,sans-serif;text-decoration:none;text-align:left;border:0;color:#000000;background:#ffffff;} 
    .AJXCSSMenuGAbaaTB ul :hover ul .sfirst a,.AJXCSSMenuGAbaaTB ul .ajxover ul .sfirst a {margin-top:4px;} 
    .AJXCSSMenuGAbaaTB ul ul :hover a,.AJXCSSMenuGAbaaTB ul ul .ajxover a {background:#f1f1f1;} 
    .AJXCSSMenuGAbaaTB br {clear:both;height:0;font-size: 1px;line-height: 0px;}

我希望做一个JavaScript文件，当鼠标悬停在主菜单中，它会创建一个反弹为了显示子菜单，在子菜单显示和子菜单返回时延迟了160毫秒，它将在缓解600毫秒延迟之前缓和到最高。

来源

2012-05-10 KevinT.

而你的问题是... – romainberger

你尝试过什么或者你只是需要免费完成工作？ –

@Jacek_FH我只是Jquery的新手。我发现这个stackoverflow是回答我的问题最简单的方法。我只是HTML中的一种中介，而不是Javascript或Jquery。 –

如果你想在jQuery的忍者我爱这30天的免费学习： http://tutsplus.com/course/30-days-to-learn-jquery/

或者只是读取DOC：和弹跳 http://jqueryui.com/demos/effect/#easing

你可以很容易地测试它工具如： http://jsfiddle.net/或http://jsbin.com/3/

这是一个很好的入门套件！

来源

2012-05-10 08:23:13

我该怎么做这个工作？（“.ajxsub”）（function（）{（this）.effect（“bounce”，{times： 3}，300）; }））; –

你在哪里找到这个脚本？请阅读：http：//api.jquery.com/on/ –

回答

相关问题