Question

我有这个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文件，当它悬停在主菜单上时，它会创建一个弹跳以显示子菜单，子菜单显示的160ms延迟和子菜单的返回，它只会缓和到在缓和之前，顶部延迟600ms。

Answer 1

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

或者只是阅读文档：http://api.jquery.com/animate/并进行反弹 http://jqueryui.com/demos/effect/#easing

您可以使用以下工具轻松测试： http://jsfiddle.net/或http://jsbin.com/3/

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

HTML弹跳效果

1 个答案: