Question

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

With toggle() nothing happens:

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

This is similar to jQuery toggle animation

Answer 1

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.