Side navigation
#14344 closed bug (fixed)
Opened September 08, 2013 12:28AM UTC
Closed September 10, 2013 07:57PM UTC
Last modified September 20, 2013 12:11AM UTC
Putting different effects in callbacks uses only the first effect.
| Reported by: | chad@dogtato.net | Owned by: | timmywil |
|---|---|---|---|
| Priority: | high | Milestone: | 1.11/2.1 |
| Component: | effects | Version: | 1.10.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I've made this example: http://jsfiddle.net/UhEQ6/
In the example there is a link. Clicking it should hide the link, then slide the content into place. Clicking the content should slide it up and then show the link.
Instead what happens is the link is hidden, then the content is shown. Then the content is slid up and the link is slid down.
So instead of instant>slide and slide>instant, it does instant>instant and slide>slide
side note: slideDown doesn't seem to work on jsfiddle, but the end result is the same as I get on a normal site where slideDown does work.
Attachments (0)
Change History (5)
Changed September 08, 2013 08:16AM UTC by comment:1
Changed September 08, 2013 09:06AM UTC by comment:2
1. You're right, after extensive testing I've determined it was a trick of the eyes.
2. That code looks like it gets called for both hiding and showing. Since .hide() is only being called once when the document is ready, why does that effect slideDown but not slideUp?
That said, it does work with <div>.
<a> version: http://jsfiddle.net/UhEQ6/12/
<div> version: http://jsfiddle.net/UhEQ6/13/
It still seems like something is amiss to me, though maybe it's only an issue for people who don't know what they're doing.
Changed September 10, 2013 07:49PM UTC by comment:3
| component: | unfiled → effects |
|---|---|
| owner: | → timmywil |
| priority: | undecided → high |
| status: | new → assigned |
This is a bug. We should be accounting for defaultDisplay when animating width/height.
Changed September 10, 2013 07:57PM UTC by comment:4
| resolution: | → fixed |
|---|---|
| status: | assigned → closed |
Ensure display: inline-block when animating width/height on inline elements. Fixes #14344.
Changeset: 73fe17299a840a8a7f3ffffcac15e32a88bd3d66
Changed September 20, 2013 12:11AM UTC by comment:5
| milestone: | None → 1.11/2.1 |
|---|
It seems to be more like instant>instant and slide>instant.
1. The a.alt-toggle element isn't actually being animated, its display property is being toggled between "none" and "inline-block".
2. By calling .hide() on .alt-content on line 15 in your jsfiddle, you set its display property to "none". When slideDown gets called on the element, lines 308-312 in the effects module gets skipped which is why it shows instantly. If you inspect the element though, you'll see that the height property is being incremented.
When you try animating inline elements, you're gonna have a bad time. Height and width properties do not apply on inline elements. Your best bet is to use a block-level element for your .alt-content like a <p> or <div>.
There's probably a dupe of this somewhere in the tracker (and likely closed as notabug).