#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 invokeaccordion("activate",...)
in order to restore state. Unfortunately, since activation is built atopclickHandler()
, 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 Changed 15 years ago by
comment:2 Changed 15 years ago by
Milestone: | TBD → 1.next |
---|
comment:3 Changed 13 years ago by
Milestone: | 1.next → 1.9 |
---|---|
Summary: | Accordion ignoring animation requests → Accordion: Activating a panel during animation fails |
comment:4 Changed 13 years ago by
Owner: | joern.zaefferer deleted |
---|---|
Status: | new → assigned |
comment:5 Changed 13 years ago by
Status: | assigned → open |
---|
comment:6 Changed 12 years ago by
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 12 years ago by
Resolution: | → fixed |
---|---|
Status: | open → closed |
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 12 years ago by
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
Replying to sunshine:
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.)