Bug Tracker

Opened 4 years ago

Closed 4 years ago

Last modified 4 years ago

#14344 closed bug (fixed)

Putting different effects in callbacks uses only the first effect.

Reported by: chad@… Owned by: timmywil
Priority: high Milestone: 1.11/2.1
Component: effects Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:


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.

Change History (5)

comment:1 Changed 4 years ago by dido

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".
  1. 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).

comment:2 Changed 4 years ago by chad@…

  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.

comment:3 Changed 4 years ago by timmywil

Component: unfiledeffects
Owner: set to timmywil
Priority: undecidedhigh
Status: newassigned

This is a bug. We should be accounting for defaultDisplay when animating width/height.

comment:4 Changed 4 years ago by Timmy Willison

Resolution: fixed
Status: assignedclosed

Ensure display: inline-block when animating width/height on inline elements. Fixes #14344.

Changeset: 73fe17299a840a8a7f3ffffcac15e32a88bd3d66

comment:5 Changed 4 years ago by dmethvin

Milestone: None1.11/2.1
Note: See TracTickets for help on using tickets.