jQuery toggle custom animation

Question

How can I make a custom animation?

$('button').toggle(function() {
  anim.go("fadeOut slow", $("mydiv"));
}, function() {
  anim.go("fadeIn slow", $("mydiv"));
});

Toggle is working, but first appears toggle animation, then mine. How can I disable default toggle anim? Like toggle(0) P.S I've tried to add 0 to my code, but then second function isn't working. Any ideas?

Your issue is because in the modern versions of jQuery toggle() no longer works in the manner you've used. You'll need to use click() and then check the visibility state of the element and then run the required animation — Rory McCrossan
– Rory McCrossan, Commented Apr 29, 2017 at 9:15
Thank you so much, please write answer. if($("mydiv").is(":visible")) { works perfectly! — gSide
– gSide, Commented Apr 29, 2017 at 9:21

Rory McCrossan · Accepted Answer · 2017-04-29 09:25:00Z

1

Your issue is because in the modern versions of jQuery toggle() no longer works in the manner you've used, ie. two separate functions called alternately.

Instead you'll need to use click(), check the visibility state of the element and then run the required animation based on that, eg:

$('button').click(function() {
  var $div = $('#mydiv');
  var action = $div.is(':visible') ? 'fadeOut' : 'fadeIn';
  anim.go(action + " slow", $div);
});

answered Apr 29, 2017 at 9:25

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

Collectives™ on Stack Overflow

jQuery toggle custom animation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related