如何在ul上创建弹跳效果

Question

我正在使用一个有菜单的页面。当您选择菜单(鼠标悬停或鼠标移动)时，将出现一个下拉列表ul。以下是代码

<head>  
    <script type="text/javascript" src="js/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script>  
    <script type="text/javascript" language="javascript" src="js/jquery.dropdown.js"></script>   
    <script type="text/javascript" src="js/myBounce.js"></script>
    <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script> 
</head>

<body>

    <div id="page-wrap">
        <div id="menubg">      
            <ul class="dropdown">   
                <li><a href="#">Really Tall Menu</a>
                    <ul>
                        <li><a href="#">Basit</a></li>
                        <li><a href="#">Masood</a></li>
                         ...                     
                   </ul>
                </li>
                <li><a href="#">Kinda Tall Menu</a>
                    <ul id="test">
                        <li><a href="#">Artificial Turf</a></li>
                        <li><a href="#">Benches &amp; Bleachers</a></li>
                        <li><a href="#">Communication Devices</a></li>
                        ..
                    </ul>
                </li>
            </ul>       
    </div>
</body>

js/jquery-ui-1.8.17.custom.min.js包含弹跳效果。我希望当我的ul出现时，它会以弹跳效果出现。我的页面上有很多用户界面。在myBounce.js中，我使用了以下代码，但它不起作用

$(document).ready(function(){
    $("ul").effect("bounce");
});

如何在ul上创建弹跳效果？

谢谢

Answer 1

您应该使用高级jQuery ui show方法在显示您的ul时添加效果。

$( "#id_of_your_ul" ).show( 'bounce');

Answer 2

使用您的html，尝试如下所示：

<style type="text/css">
    ul li ul {
        display: none;
    }
</style>

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

<script type="text/javascript">
    $(document).ready(function () {
       $('ul.dropdown > li > a').click(function (e) {
           e.preventDefault();
           $(this).closest('li').children('ul').show().effect('bounce');
       });
    });
</script>