想用 jQuery 和 CSS 滑动固定区域

Question

我想实现 Magic 的 slideUp 的功能。我在这之后写了一段代码，这里是 my sample page.

<!DOCTYPE html>
<html>
<head>
    <title>Learning jQuery</title>
    <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" />
    <style>
        div#foo {
            height: 100px;
            background-color: red;
        }
        div#bar {
            height: 100px;
            background-color: green;
            display: none;
        }
    </style>
</head>

<body>
    <div id="foo">Apple Orange</div>
    <div id="bar">Banana Lemon</div>
    <div>
        <ul>
            <li>HTML</li>
            <li>CSS</li>
            <li>JavaScript</li>
        </ul>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function(){
            setTimeout(function() {
                $("div#foo").animate(
                    {height: "toggle", opacity: "toggle"}, "slow", function() {
                        $("div#bar").show();
                });
            }, 2000);
        });
    </script>

</body>
</html>

好像行得通，但是<ul>区域也移动了。我不希望 <ul> 区域移动，只希望 <div> 区域移动和更改。我应该怎么写代码？你能帮帮我吗？

补充：我要实现的是<div id="foo"> slidesUp 甚至当<div id="foo"> 是slidingUp 时，我们可以在<div id="foo">.<div id="bar">下看到<div id="bar">。

Answer 1

这样做：

   ul{
       position: absolute;
       z-index: 5;
       margin-top: 22px;
     }

想用 jQuery 和 CSS 滑动固定区域

Want to slideup fixed area with jQuery and CSS

css

jquery

slideup