Bug Tracker

Ticket #14344 (closed bug: fixed)

Opened 15 months ago

Last modified 15 months ago

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:
Blocking: Blocked by:

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.

Change History

comment:1 Changed 15 months 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 15 months 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 15 months ago by timmywil

  • Owner set to timmywil
  • Priority changed from undecided to high
  • Status changed from new to assigned
  • Component changed from unfiled to effects

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

comment:4 Changed 15 months ago by Timmy Willison

  • Status changed from assigned to closed
  • Resolution set to fixed

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

Changeset: 73fe17299a840a8a7f3ffffcac15e32a88bd3d66

comment:5 Changed 15 months ago by dmethvin

  • Milestone changed from None to 1.11/2.1
Note: See TracTickets for help on using tickets.