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

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);
});

例子.

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

更多关于toggle() 这里.