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 http://api.jquery.com/toggle/ Looks like you are using `toggle()` function incorrectly. — Grzegorz, Oct 24 '12 at 23:08
@Grzegorz It is related to http://api.jquery.com/toggle-event/ — Reflective, Oct 24 '12 at 23:15

score 3 · Accepted Answer · answered Oct 24 '12 at 23:22

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 '12 at 23:22

Nelson

49,283
8
68
81

The sama answer i wanted to post :) – GomatoX Oct 24 '12 at 23:27
Actually I answer the same, giving some notes and providing a working code. But may be a bit late :) – Reflective Oct 24 '12 at 23:40
@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 – Jessica Dec 10 '15 at 06:48

adeneo · Answer 2 · 2012-10-24T23:26:25.237

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

Nelson · Answer 3 · 2012-10-24T23:19:45.640

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 '12 at 23:19

answered Oct 24 '12 at 23:13

Nelson

49,283
8
68
81

Reflective · Answer 4 · 2012-10-24T23:22:03.863

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 '12 at 23:22

answered Oct 24 '12 at 23:16

Reflective

3,854
1
13
25

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.. – greener Oct 24 '12 at 23:22
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. – Reflective Oct 24 '12 at 23:24

Jquery toggle on custom animation

4 Answers4

Linked