Question

基本上我有一个小div，最初设计为60x60。我创建了点击事件来动画div的扩展：

$("#myDiv").click(function () {
    $(this).animate(
    {
        width: "350px",
        height: "300px"
    }, 500);
}

如果有人再次点击div，我想撤消此动画。无论如何，每次点击都可以在原始大小和扩展大小之间切换（仍然使用动画功能）？

我找到了toggleClass函数，但我认为这不会与animiate一起使用。

你可以在这里看到一个基本的小提琴：http://jsfiddle.net/NS9Qp/

Answer 1

$("#myDiv").toggle(function() {
    $(this).stop().animate({
        width: "350px",
        height: "300px"
    }, 500);
}, function() {
    $(this).stop().animate({
        width: "60px",
        height: "60px"
    }, 500);
});

Example

jQuery toggle()函数允许您定义两个或多个函数，以便在每次单击鼠标时循环。在这种情况下，第一个（在第一次点击时触发）扩展div，第二个（在第二次点击时触发）重置它。在第三次点击时，它会从第一次开始，依此类推。

有关toggle() here的更多信息。

Answer 2

只是为了与众不同：

var size=[];
$("#cornerBox").click(function(){
    $(this).width() >= 350 ? size=[60, 60] : size=[350, 300];
    $(this).stop().animate({ width: size[0], height: size[1] },500);
});

小提琴：http://jsfiddle.net/NS9Qp/1/

Answer 3

我最终使用了jQuery UI的动画toggleClass效果：http://jqueryui.com/demos/toggleClass/

超级简单的代码：

$('h2').click(function() {
    $(this).next().toggleClass("hidden", 1000);
});

Answer 4

不要硬编码css样式（在我的示例中，我使用inline css for myDiv元素，将其放在css文件中）。

<div id="myDiv" style="background:red; width: 60px; height: 60px;"></div>

<script type="text/javascript">
    var div = $('#myDiv');
    div
        .attr('defWidth', div.width())
        .attr('defHeight', div.height())
        .toggle(function() {
                $(this).stop().animate({width: "350px", height: "300px"}, 500);
            }, function() {
                $(this).stop().animate({width: $(this).attr('defWidth'), height: $(this).attr('defHeight')}, 500);
            }
        );
</script>

Answer 5

我为这样的情况做的是存储转换数组。

var transforms = { 'height0': 60, 'width0': 60, 'height1': 300, 'width1': 350};

然后，存储0或1之间的切换，并使用相应的动画值。

编辑：将此与前一个切换示例相结合，您就拥有了一个可靠的工作解决方案！

可以使用jQuery在两种尺寸之间切换/动画？

5 个答案: