jquery - 尝试在点击时切换动画

Question

我试图在单击时展开一个框，一旦再次单击它，我想将其缩小回正常状态。这是我当前的代码。

$(".box").click(function() {
    $(this).toggle(function() {
        $(this).animate({
            width: "200px",
            height: "200px"
            }, "slow" );
        }, function () {
        $(this).animate({
            width: "50px",
            height: "50px"
            }, "slow" );
        });
});

原始大小为 50 像素，我希望它在 50 像素和 200 像素之间来回切换。使用此代码，当单击该框时，该框就会消失。有什么建议么？

Answer 1

那是因为您使用的是 jQuery 1.9+ 并且没有 jQuery.toggle()事件方法，jQuery 使用.toggle()显示效果方法并隐藏您的元素。.toggle()event 方法在 jQuery 1.7 中被弃用，并在 jQuery 1.9 中被删除。

$(".box").click(function() {
    var $this = $(this),
        val = $this.height() == 200 ? '50px' : '200px';
    $this.stop().animate({
        width: val,
        height: val
    }, "slow");
});

http://jsfiddle.net/q9UMA/