jquery - 如何在jquery中反转动画

Question

我有一些来自另一个线程的关于反转动画的代码，但我无法让它工作，所以我想我再问一次。这是我的代码：

$(function(){
$('prices').toggle(function(){
    $('#prices').animate({
       height: '+=200px'
    });
}, function(){
    $('#prices').animate({
       height: '+=200px'
       });
     });
});

我只需要有人告诉我为什么这不起作用。切换时它什么也不做。

Answer 1

语法错误

您在第 2 行有语法错误：请#prices改用：

$(function(){
$('#prices').toggle(function(){
    $('#prices').animate({
       height: '+=200px'
    });
}, function(){
    $('#prices').animate({
       height: '+=200px'
       });
     });
});

---

根深蒂固的问题：.toggle()在≥v1.8 中弃用效果

不过需要注意的是，在 jQuery 的后续版本（v1.8 和 v1.9）中，该.toggle()方法的这个特性已经被弃用了。您需要将此事件绑定到单击处理程序，并将状态存储为变量。

此外，由于您一直在将高度增加 200 像素，因此无论如何使用切换功能没有什么意义；）除非您的意思是在每次单击后将高度降低回 200 像素：

 $(function () {
    $('#prices').click(function () {
        if($(this).data("toggle") == 1) {
            // Open state
            // The height should decrease when open state is registered
            // Effect: To collapse the open state
            $(this).animate({
                height: '-=200px'
            });      

            // Now set state to collapsed
            $(this).data("toggle", 0);

        } else {
            // Resting/collapsed state
            // The height should increase when resting state is registered
            // Effect: To expand the collapsed state
            $(this).animate({
                height: '+=200px'
            });

            // Now set state to open
            $(this).data("toggle", 1);
        }
    });
});

JSFiddle 演示