Question

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

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

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

Answer 1

那是因为你使用的是jQuery 1.9+并且没有jQuery .toggle()事件方法，jQuery使用.toggle()显示效果方法并隐藏你的元素。从jQuery 1.7开始，不推荐使用.toggle()事件方法，并且已在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/

尝试在点击时切换动画

1 个答案: