Jquery 切换自定义动画

Question

我有一个动画，我想在单击链接时触发它。当我单独运行动画时，它工作正常。但是使用jquery toggle()，它就不再起作用了。任何人都可以轻松看出原因吗？

没有 toggle() 它可以工作(分别运行):

$('#sign-in-fx').click(function() {
    $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart');
    //$('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart');
});

使用toggle()什么也不会发生:

$('#sign-in-fx').click(function() {
    $('.login_form').toggle(
        function() {
            $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart')
        },
        function() {
            $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart')
        }
    );
});

这类似于 jQuery toggle animation

Answer 1

现在我认为这就是您最初想做的事情:

$('#sign-in-fx').toggle(
        function() {
            $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart')
        },
        function() {
            $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart')
        }
);

您正在对要设置动画的元素调用 toggle()，但必须在将接收 click 事件的元素上调用它。