动画队列问题``` 单元格1 内容1 单元格2 内容2 单元格3 内容3 单元格4 内容4 单元格5 内容5 单元格6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .clearfix:after {
            content: "";
            display: block;
            clear: both;
        }

        .menulist > li {
            width: 100px;
            height: 30px;
            float: left;
            background-color: red;
            list-style: none;
            position: relative;
            margin: 0px 5px 0 0;
        }

        .menulist > li > div {
            position: absolute;
            height: 60px;
            top: 30px;
            left: 0;
            background-color: greenyellow;
            width: 100px;
            display: none;
        }
    </style>

</head>
<body>

<div>
    <ul class="menulist clearfix">
        <li>单元格1
            <div class="content">内容1</div>
        </li>
        <li>单元格2
            <div class="content">内容2</div>
        </li>
        <li>单元格3
            <div class="content">内容3</div>
        </li>
        <li>单元格4
            <div class="content">内容4</div>
        </li>
        <li>单元格5
            <div class="content">内容5</div>
        </li>
        <li>单元格6
            <div class="content">内容6</div>
        </li>
    </ul>
</div>

<script>
    $(function () {

        $("li").hover(divShow, divHide);

        function divShow() {
            $(this).children("div").show(1000);
        }

        function divHide() {
            $(this).children("div").hide(1000);
        }
    })
</script>
</body>
</html>