Question

所以我有这个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一时，我想要div二显示（animate），div三（和div四，如果也点击div三）在div 2下移动位置（使用相同的动画）。

当我再次点击div时，我想要div二隐藏（animate）和div三（和div四，如果div三点击）回到他们之前的位置。

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

Answer 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

Answer 2

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

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

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

    });

Answer 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/

点击时jQuery动画div up

3 个答案: