JQuery宽度动画不运行

Question

我试图让div消失并重新出现，方法是让文本消失，div折叠，然后与另一个div相反，使用JQuery动画函数，但在以下代码中不起作用：

$(currentTab + " > p").animate({ opacity: 0},{
        duration: 500,
        complete: function(){

            $(currentTab).animate({width: "0", opacity: 0}, {
                duration: 500,
                complete: function(){

                    $(clickedTab).animate({width: "70%"}, {duration: 500, complete: function(){

                        $(clickedTab + " > p").animate({
                            opacity: 1
                        }, 500);
                    }});

            }});

    }});

其中currentTab和clickedTab是我的div ids，如"#ct-1"，我的html如下所示：

<div id="ct-1" class="content-div">
    <p>aaaaaaaaaaaaaaaaaaaaaaaa</p>
</div>
<div id="ct-2" class="content-div">
    <p>bbbbbbbbbbbbbbbbbbbbbbbbb</p>
</div>

所以第二个动画根本不会运行。我猜这与DOM有关，也许我不能访问动画中的父母？也许这和这件事无关。

提前感谢！

罗宾

Answer 1

假设currentTab是ct-1，clickedTab是ct-2，您的所有动画都可以在此小提琴中工作：

你不会注意到宽度缩小，除非clickedTab有一个背景，这是我在小提琴中添加的。