Opened 11 years ago

Closed 8 years ago

Last modified 8 years ago

#3532 closed bug (fixed)

Accordion: Activating a panel during animation fails

Reported by: sunshine Owned by:
Priority: major Milestone: 1.9.0
Component: ui.accordion Version: 1.6rc2
Keywords: accordion animation ignore unintuitive Cc:
Blocked by: Blocking:

Description

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.

Change History (9)

comment:1 in reply to:  description Changed 11 years ago by 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.)

comment:2 Changed 11 years ago by Jörn Zaefferer

Milestone: TBD1.next

comment:3 Changed 9 years ago by Scott González

Milestone: 1.next1.9
Summary: Accordion ignoring animation requestsAccordion: Activating a panel during animation fails

comment:4 Changed 9 years ago by Scott González

Owner: joern.zaefferer deleted
Status: newassigned

comment:5 Changed 9 years ago by Scott González

Status: assignedopen

comment:6 Changed 8 years ago by 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.

comment:7 Changed 8 years ago by Kris Borchers

Resolution: fixed
Status: openclosed

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

comment:8 Changed 8 years ago by 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

comment:9 Changed 8 years ago by Scott González

#7901 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.