jQuery的自定义动画切换 [英] Jquery toggle on custom animation

问题描述

我有这个动画，我想在一个链接的点击来触发它。当我单独运行的动画，它的正常工作。但使用jQuery 切换（），它不工作了。任何人都可以很容易地看到，为什么？

I have this animation which I'd like to trigger upon click of a link. When I run the animations separately, it's working fine. But using the jquery toggle(), it doesn't work anymore. Can anyone easily see why?

没有切换（）它的工作原理（运行每个单独）：

Without toggle() it works (ran each separately):

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

使用切换（）什么也没有发生：

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

这是类似于 jQuery的切换动画

推荐答案

现在我觉得这是你最初想要做的：

Now I think this is what you originally wanted to do:

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

您是切换（）呼吁元素的动画，但它具有将接收点击事件。

You were calling toggle() on the element to animate, but it has to be called on the element that will receive the click event.

这篇关于jQuery的自定义动画切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！