jQuery动画div在点击时向下答案

【问题标题】：jQuery animate div up down on clickjQuery动画div在点击时向下
【发布时间】：2014-01-23 00:07:33
【问题描述】：

所以我有这个 HTML

<div id="one">One</div>
<div id="two">Two   <br/> <br/>
   Two
</div>
<div id="three">Three</div>
<div id="four">Four   <br/> <br/>
   Four   <br/> <br/>
   Four
</div>

jQuery:

$(document).ready(function () {
    $("#two").hide();
    $("#four").hide();
    $("#one").click(function () {

        $("#four").slideUp("slow", function () {

        });
        $("#three").slideToggle("slow,", function () {

        });

        $("#two").slideToggle("slow", function () {

        });
    });

    $("#three").click(function () {
        $("#four").slideToggle("slow,", function () {});
    });
});

我正在尝试做的是在另一个下显示 div 1 和 3。

当我单击 div 1 时，我希望 div 2 显示（动画），并且 div 3（和 div 4，如果也单击 div 3）移动 div 2 下的位置（具有相同的动画）。

当我再次单击 div 1 时，我希望 div 2 隐藏（动画）并且 div 3（和 div 4，如果 div 3 被点击）回到他们之前的位置。

这里是 JSFiddle： http://jsfiddle.net/6ynnR/

【问题讨论】：

如果您在小提琴中包含 jQuery 会有所帮助 - 那是您的问题 ;) jsfiddle.net/6ynnR
谢谢你。不过，我的问题是，当我单击 div 1 时，div 3 和 div 4 会隐藏。我希望它们在单击 div 1 后都移动到 div 2 下，然后在再次单击 div 1 时向上移动

标签： javascript jquery html

【解决方案1】：

您似乎想要这样的东西：EXAMPLE HERE

更新 jQuery：

$("#two, #four").hide();

$("#one").click(function () {
    $("#two").slideToggle(function () {
        $("#four").slideUp();
    });
});

$("#three").click(function () {
    $("#four").slideToggle(function () {
        $("#two").slideUp()
    });
});

或者，这是另一种方法：EXAMPLE HERE

【讨论】：

【解决方案2】：

只需删除以下代码即可：D

    $("#four").slideUp("slow", function () {

    });
    $("#three").slideToggle("slow,", function () {

    });

【讨论】：

【解决方案3】：

我希望这对你有用，

我添加了条件语句：

if(($("#two").is(":visible"))&&($("#four").is(":visible"))){

      $("#four").slideToggle("slow,", function () {});
      $("#two").slideToggle("slow,", function () {});

    }

并删除了两个函数：

$("#four").slideUp("slow", function () {
    });

$("#three").slideToggle("slow,", function () {
    });

http://jsfiddle.net/uY73z/19/

【讨论】：