1

我有一个下拉菜单，使用 easeOutBounce 显示/隐藏子导航。它工作了几个月，然后我们的网络主机切换了服务器，突然间它就不起作用了。我完全感到困惑。我可以看到没有任何变化，但是动画不起作用。我在下面粘贴了我的代码。拜托，拜托，如果你发现它有问题，请告诉我，我很绝望。 

$(document).ready(function() {
$('body').css('display','none');

$("ul.blockeasing li.main").mouseover(function() { 
  $(this).find('.subnav').stop().animate({height: '220px', opacity:'1'},{queue:false,duration:1500, easing:'easeOutBounce'})
    }); 
$("ul.blockeasing li.main").mouseout(function() { $(this).find('.subnav').stop().animate({height:'0px', opacity:'0'},{queue:false, duration:1600, easing: 'easeOutBounce'})
    });


    $("li.main").hover(function() {
          $(this).stop().animate({ backgroundColor: "#5b77bb"}, 600);},
       function() {
          $(this).stop().animate({ backgroundColor: "#b0b0b1" }, 600);
    });

 $('body').css('display', '');

});

这是HTML：

<!DOCTYPE html>

<head>

<title>Decinar | Home</title>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<meta http-equiv="content-type" content="text/html;charset=utf-8" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

<script type="text/javascript" src="blockeasing.js"></script>

<link type="text/css" rel="stylesheet" href="css/IndexCSS.css" />
<link type="text/css" rel="stylesheet" href="css/headermenuCSS.css" />

</head>
<body>

<div class="menu">
<ul class="blockeasing">

<li class="main_logo"><a href="index.html"><img src="images/GoodLogo.png" style="border:none" alt="Decinar Logo" /></a>

<li class="main">The Decinar Program
<ul class="subnav">
<li><a href="program_overview.html">Program Overview</a></li>
<li><a href="program_benefits.html">Program Benefits</a></li>
<li><a href="decinar_modules.html">Decinar Module Series</a></li>
<li><a href="module_desc.html">Decinar Module Descriptions</a></li>
<li><a href="virtual_classroom.html">The Virtual Classroom</a></li>
<li><a href="360.html">360 Degree Feedback &amp Joint Venture</a></li>
</ul>
</li>
<li class="main">Learning Paths
<ul class="subnav">
<li><a href="enrolment_options.html">Program Enrolment Options</a></li>
<li><a href="decinar_discovery.html">Decinar Discovery Session</a></li>
<li><a href="resilient_optimism.html">Resilient Optimism Workshop</a></li>
<li><a href="students.html">Decinar for Students</a></li>
<li><a href="families.html">Decinar for Couples and Families</a></li>
</ul>
</li>
<li class="main">Licensing and Careers
<ul class="subnav">
<li><a href="licensing_news.html">What's new in licensing?</a></li>
<li><a href="licensing.html">Licensing Opportunities</a></li>
<li><a href="careers.html">Career and Partnership Opportunities</a></li>
</ul>
</li>
<li class="main">Connect with Decinar
<ul class="subnav">
<li><a href="contact.php">Contact Us</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="testimonials.html">Graduate Testimonials</a></li>
<li><a href="socialmedia.html">Social Media Groups</a></li>
</ul>
</li>
</ul>

    </div>

这是CSS：

div.menu{

    height:50px;
    position:relative;
    width:1200px;
    z-index:1000;
margin-left: auto;
margin-right: auto;
margin-bottom: -10px;
}     
ul.blockeasing {
    color: black;
    float:left;
    font-size:13px;
font-family: IstokWeb-Regular, Arial, sans-serif;
    padding:0;
    width:1300px;
}
ul.blockeasing li{
    background:none repeat scroll 0 0 #b0b0b1;
border-radius: 3px;
    border:none;
    display:block;
    float:left;
    height:60px;
    list-style:none outside none;
    margin:0 5px;
    padding:5px 0px;
    text-align:center;
    width:220px;
}

ul.blockeasing li.main_logo {
background: transparent none repeat scroll 0 0;
display: block;
float: left;
list-style: none outside none;
margin:-20px 5px 0 5px;
padding: 12px 5px;
width: 250px;
}

ul.blockeasing li.main{
  height:20px;
  position:relative;    
}

ul.blockeasing li a{
    color: black;
text-decoration: none;
}

ul.blockeasing li ul.subnav{
    background:none repeat scroll 0 0 #b0b0b1;
border-radius: 3px;
    border-bottom:5px solid #5b77bb;
    float:left;
    padding:0px 5px 0;
    position:relative;
    width:250px;
    margin-top:15px;
    height:0px;
    display:none
 }

ul.blockeasing li ul li{
    border:none;
    border-bottom:1px solid #ccc;
    padding:5px;
    float:left;
    width:100px;
    overflow:visible
}
4

0 回答 0