Jquery toggle on custom animation

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

See api.jquery.com/toggle Looks like you are using toggle() function incorrectly. — Grzegorz
– Grzegorz, Commented Oct 24, 2012 at 23:08

Nelson Benítez León · Accepted Answer · 2012-10-24 23:22:37Z

3

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.

answered Oct 24, 2012 at 23:22

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

GomatoX Over a year ago

The sama answer i wanted to post :)

Reflective Over a year ago

Actually I answer the same, giving some notes and providing a working code. But may be a bit late :)

Jessica Over a year ago

@Nelson I know this is an old answer, but the way you're using toggle(), is deprecated. Please edit, or remove your answer so as not to confuse people

adeneo · Accepted Answer · 2012-10-24 23:26:25Z

1

toggle() used the way you are using it, is deprecated!

Use a flag, and toggle the animated width directly, like so:

var flag = true;

$('#sign-in-fx').on('click', function() {
    $('.login_form').stop(true, true)
                    .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart');
    flag=!flag;
});

FIDDLE

Or if you don't like globals, you can always use data() :

$('#sign-in-fx').on('click', function() {
    var flag = $('.login_form').data('flag')!=undefined?$('.login_form').data('flag'):true;
    $('.login_form').stop(true, true)
                    .animate({ width: flag?'273':'1' }, 'slow', 'easeInOutQuart')
                    .data('flag', !flag);
});

FIDDLE

edited Oct 24, 2012 at 23:26

answered Oct 24, 2012 at 23:13

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Nelson Benítez León · Accepted Answer · 2012-10-24 23:19:45Z

0

I think you could also do as follows:

$('#sign-in-fx').click(function() {
    if (! $('.login_form').is(':animated')) { //if no animation running
       if ($('.login_form').width() > 1) {
          $('.login_form').animate({ width: '1' }, 'slow', 'easeInOutQuart');
       } else {
         $('.login_form').animate({ width: '273' }, 'slow', 'easeInOutQuart');
       }

    }
});

edited Oct 24, 2012 at 23:19

answered Oct 24, 2012 at 23:13

Nelson Benítez León

51.1k8 gold badges70 silver badges84 bronze badges

Comments

Reflective · Accepted Answer · 2012-10-24 23:22:03Z

0

Are you sure it is done on document.ready? Your code seems fine.

    $(function () {
      $('.login_form').toggle(
          function() {
              $(this).animate({ width: '273' }, 'slow', 'easeInOutQuart')
          },
          function() {
              $(this).animate({ width: '1' }, 'slow', 'easeInOutQuart')
          }
      );
    });

edited Oct 24, 2012 at 23:22

answered Oct 24, 2012 at 23:16

Reflective

3,9371 gold badge17 silver badges25 bronze badges

2 Comments

greener Over a year ago

It is. I can't really think of a good reason why it's not working unless there's some typo I'm too tired to see..

Reflective Over a year ago

Look the edit of this answer - it works like that! .toogle() checks for a click and executes the functions(handlers) added one by one ... they could be more than 2. In your code you are clicking other link.

Collectives™ on Stack Overflow

Jquery toggle on custom animation

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related