0

In this question I found that using easing settings when toggling a div's visibility breaks the ability to determine the current state of the toggle.

In a jsFiddle I have these lines:

$(this).next('div.detailsTable').toggle('blind', 'easeInOutQuart', 300);
$(this).next('div.detailsTable').toggle();

With each of them commented out alternately, an if statement that checks ".is(':visible')" shows that the first line always shows false (not visible).

Looking in the console at the HTML, the display property (none or visible) never gets set on the div that is getting hidden/shown.

Go to the jsFiddle linked above and alternately comment out each of those lines and you'll see what I mean.

If you see something wrong in my code in the jsFiddle, let me know, otherwise, how can I get around this to be able to determine the toggle state so I can do something depending on each state?

Community
  • 1
  • 1
marky
  • 4,878
  • 17
  • 59
  • 103

1 Answers1

2

just use callback on toggle end, else the test will be done before anim end

.toggle('blind', 'easeInOutQuart', 300, function(){
    if ($(this).is(':visible')) {
        alert('visible');
    } else {
        alert('not visible');
    }
});

http://jsfiddle.net/wWaDm/7/

r043v
  • 1,859
  • 1
  • 15
  • 25
  • This DOES answer my question as presented, but unfortunately it doesn't help me in my overall issue. (I need to be able to determine the display state before running the animation - to determine whether I want to toggle it or not.) But thanks! :) – marky Feb 25 '13 at 13:30
  • You totally rock, r034v! Thanks! – marky Feb 25 '13 at 13:41