How to use the toggle function with click function?

Question

I would like to create an animation when the user clicks on a button. There are two animate functions I want to do on click so I thought I would use the toggle function which swap between the two functions.

Now the problem is if I use the toggle function it is doing the two animate functions without click and also the button disappears.

$('#button').toggle(
    function() {
        $('#slider').stop().animate({"margin-right": '0'});
    },
    function() {
        $('#slider').stop().animate({"margin-right": '50'});
    }
);

How do I do the animate functions alternatively every time when the user clicks a button?

@Alnitak i used slideToggle() for another one but its still working! — sun
– sun, Commented Jun 6, 2013 at 8:25

Alnitak · Accepted Answer · 2013-06-06 08:24:59Z

2

The .toggle(fn1, fn2) function has been deprecated.

The best alternative is to use a function that maintains a state variable to indicate whether it's an "even" click or an "odd" click.

In the example below I'm using an "immediately invoked function expression" to wrap that state variable in a closure (so that it's not global). Instead of an odd/even flag I'm actually using the expression target = 50 - target to flip the target coordinate alternately between 0 and 50 on each click.

Polling the current position of the element will not work correctly because it'll miss button clicks that happen mid-animation.

(function() {   // closure to hold state variable
    var target = 0;
    $('#button').on('click', function() {
        $('#slider').stop().animate({'margin-right': target});
        target = 50 - target;
     });
})();

See http://jsfiddle.net/alnitak/5daYu/

edited Jun 6, 2013 at 8:24

answered Jun 6, 2013 at 8:09

Alnitak

341k72 gold badges420 silver badges503 bronze badges

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

3 Comments

Alnitak Over a year ago

@raj .slideToggle isn't deprecated, but it'll only perform a "show" or "hide" animation.

sun Over a year ago

sorry i couldn't able to add your name here

Alnitak Over a year ago

@raj yes, they're different. .slideToggle performs a show/hide animation, with the state alternating on each call. .toggle(fn1, fn2) registers two "click handlers", one for each alternate click.

Rohan Kumar · Accepted Answer · 2013-06-06 08:32:30Z

0

Try this,

$('#button').on('click',function(){
   var mr=parseInt($('#slider').css('margin-right').replace('px',''))==0 ? 50 : 0;
   $('#slider').stop().animate({"margin-right": mr});
});

Alernatively,

var mr=0;
$('#button').on('click',function(){
    $('#slider').stop().animate({"margin-right": mr});
    mr=(mr==0) ? 50 : 0;
});

edited Jun 6, 2013 at 8:32

answered Jun 6, 2013 at 7:55

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

6 Comments

sun Over a year ago

It coming to margin-right=50 but when i again click it not going back

Alnitak Over a year ago

@raj probably because the output from .css() is in "Npx" format, not a number.

Alnitak Over a year ago

in any event, testing the current position isn't a great way to test this. It would be better to have a separate variable tracking the intended movement direction.

Alnitak Over a year ago

@RohanKumar why not just test for == "0px" instead of that .replace call? That said, I still think that's the wrong approach. It'll do the wrong thing if the button is clicked mid-animation, because it won't flip the animation direction.

sun Over a year ago

@RohanKumar Do you mind if i ask the explanation of replace. B'coz i would like to learn that:)

|

Collectives™ on Stack Overflow

How to use the toggle function with click function?

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related