Question

我有这个代码： #menu是一个按钮，.hmenu是一个div。当我单击按钮时，它会展开，当我再次单击它时，它会消失。所以效果很好。

但是我想在单击.hmenu对象中的菜单项时激活相同的功能。当我这样做：menuItems对象消失，div .hmenu消失，没有动画。这段代码出了什么问题？

$(document).ready(function(){
$(".hmenu").hide();
$("#menu").click(function(){
    if($(".hmenu").is(':visible')){
        $(".menuItems").hide();
        $(".hmenu").animate({height: "2px"});
        $(".hmenu").animate({width: "2px"});
        $(".hmenu").delay(900).slideUp(400);

    }else{
        $(".hmenu").slideDown(400);
        $(".hmenu").animate({height: "300px"});
        $(".hmenu").animate({width: "160px"});
        $(".menuItems").show();

    }
});
$(".hmenu a").click(function() {
        $(".menuItems").hide();
        $(".hmenu").animate({height: "2px"});
        $(".hmenu").animate({width: "2px"});
        $(".hmenu").delay(900).slideUp(600);
})
})

我的HTML（它与PHP分开）

        <body class="grad">
        <div class="container">
        <input id="menu" type="button" value="Menu"/>

        <div class="hmenu">
        <ul class="menuItems">
            <li><a href="index.php">Home</a></li>
            <li><a href="form_weights.php">Weights</a></li>
        </ul>
    </div>

Answer 1

很难在没有看到HTML的情况下确切地说出来，但我的猜测是当你调用$（“。menuItems”）时，你的.hmenu元素会自行缩小.hide（）;

你应该做的只是直接为.hmenu容器制作动画而不显示/隐藏.menuItems

另外一个提示。您可以在一个函数调用中执行多个动画，如下所示：

//Instead of this:
$(".hmenu").animate({height: "2px"});
$(".hmenu").animate({width: "2px"});

 //do this:
 $(".hmenu").animate({
    height: "2px",
    width: "2px"
 });

jQuery animate（）在点击时不动画动态菜单

1 个答案: