切换时，jquery animate无法正常工作

Question

我有以下代码。第一部分代码 - 单个动画，按预期工作 - div减少到50％。

另一方面，切换使div消失 - 似乎减小了宽度和高度，直到div不再可见。它以同样的方式重新出现。

我不是jquery专家 - 任何想法？

    // works
    $(".test-wrapper").animate({
           width: "50%"
       }, 400);

    // Doesn't work
    $(".test-wrapper").toggle(
    function () {

        $(this).animate({
            width: "50%"
        }, 400);
    },
    function () {
        $(this).animate({
            width: "100%"
        }, 400);
    });

Answer 1

jQuery的切换与动画不是一回事。切换只是隐藏/显示元素。 Here's the doc

要实现您正在做的事情，您需要定义2个不同的动画，并以某种方式使用测试来知道您需要运行哪个动画。

Answer 2

您应该使用click代替：

$(".test-wrapper").click(function () {
    $(this).animate({
        width: !this.toggled ? "50%" : "100%"
    }, 400);
    this.toggled = !this.toggled;
});

您肯定使用的是jQuery 1.9版＆gt;所以使用而不是删除一个toogle event

这one (toggle)。