Accordion: Activating a panel during animation fails

[sunshine]

Accordion's clickHandler() ignores animation requests if an animation is already in progress:

// if animations are still active, or the active header is
// the target, ignore click
if (options.running || (options.alwaysOpen && clickedActive)) {
  return false;
}

Unfortunately, this logic leads to very unintuitive behavior and perceived brokenness. Worse, since accordion("activate",...) is built atop clickHandler(), even programmatic requests to expand/collapse an item will be ignored if an animation is already active, thus accordion's state and response to programmatic actions essentially is indeterminate.

The problem manifests most obviously when the event option is set to "mouseover". Under the "mouseover" configuration, the widget behaves in a perceived broken fashion from both the user's and programmer's standpoint as described below.

• If the user moves the mouse fast enough across the face of the accordion, events which should open items underneath the mouse are ignored. With accordion's default (hard-coded) slow durations, this issue manifests frequently, with even moderate speed of mouse movement. The result is that, when animation completes, the mouse very often is hovering over an unopened item (because the mouse's entry into the item was ignored). To the user, this is perceived as broken behavior since an accordion should always open the item over which the mouse is hovering.

• I have a case where I need the accordion to revert to its original state if the mouse leaves the accordion's bounds. To accomplish this, I bind to "mouseleave" and have it invoke accordion("activate",...) in order to restore state. Unfortunately, since activation is built atop clickHandler(), the activation request often is ignored since animation frequently is in progress as the mouse leaves the accordion's bounds. Not only does this make the accordion's behavior inconsistent from the user's perspective, but it also makes it impossible to set the accordion to a known state programmatically.

Rather than ignoring new animation requests if animation already is in progress, there are better, more intuitive approaches. Some possibilities include:

• Jump the current animation to its end state and then begin the new animation.

• Chain the animations so that the newly requested one commences when the current one finishes.

Either solution would repair the reported problems: fixing the perceived brokenness and indeterminate behavior issue. If smoothness of animation is preferred, then chaining animations would be more appropriate than jumping the current animation to its end state.

[sunshine]

Replying to sunshine:

Rather than ignoring new animation requests if animation already is in progress, there are better, more intuitive approaches. Some possibilities include:

Another possibility is to allow in-progress animations to complete as usual with the exception that some in-progress animations may need to be reversed. For instance, as the mouse moves from expanded item 1 to item 2, item 1 begins to collapse and item 2 begins to expand. If the mouse then moves on to item 3 while the other animations are still in-progress, item 1 continues collapsing, item 2 immediately reverses and begins collapsing rather than expanding, and item 3 begins expanding. This seems like a preferable solution, providing smoother and more intuitive animation. (In fact, Moo.fx Accordion widget seems to behave in this fashion.)

[jdart1]

​http://jsfiddle.net/hTp9t/ example fiddle (modification of demo) programmatically activating second panel, waiting briefly and then activating third panel. Because of issue, the third panel does not activate. change the timeout so the activation happens after the animation and you can see it changes properly.

[Kris Borchers]

Accordion: Stop current hide animation, jump to last animation and calculate percentages for padding in addition to height. Fixes #3532 - Accordion: Activating a panel during animation fails

Changeset: 5f02a8ff1fb7947c40003208886214203b834ce1

[Scott González]

Merge pull request #368 from kborchers/bug_3532_2

Accordion: Stop current hide animation, jump to last animation and calculate percentages for padding in addition to height. Fixes #3532 - Accordion: Activating a panel during animation fails

Changeset: e2a9b0c5685852e3de50c31f0d842de2e5186292

[Scott González]

#7901 is a duplicate of this ticket.