Skip to main content

Search and Top Navigation

#6120 closed bug (duplicate)

Opened September 28, 2010 07:07PM UTC

Closed March 21, 2011 06:31PM UTC

Last modified January 17, 2012 11:28PM UTC

Clip animation does not work on centered elements (margin: 0 auto)

Reported by: ryanwheale Owned by:
Priority: major Milestone: 1.9.0
Component: ui.effects.* (individual effect) Version: 1.8.5
Keywords: clip effect centered div Cc:
Blocked by: Blocking:
Description

#myDiv { width:500px; margin:0 auto; }

When you animate an element with this syntax:

$('#myDiv').show('clip',{direction:'horizontal'},500);

... the behavior is not as expected.

Chrome: expands from far left instead of center

FF, IE7, IE8: expands from left, then jumps to center

I have attached my fix. Take note of the new variable "centered". My fix works for my current project, but has not gone through a lot of testing. If I can clean it up, I will post back here.

Attachments (1)
Change History (5)

Changed September 29, 2010 07:41PM UTC by ryanwheale comment:1

Just making some notes on what I have seen so far:

Some browsers return the calculated margins, as opposed to "auto". In these situations, the effect degrades to it's previous behavior. So far, Opera 10.6 is the only browser I have seen that is returning calculated margins.

Changed March 08, 2011 12:40PM UTC by gnarf comment:2

status: newopen

ryan - any other updates here? I'm not sure what happened to your attachment, but can you post a link?

jsFiddled: http://jsfiddle.net/gnarf/rbsKe/

Changed March 21, 2011 06:31PM UTC by gnarf comment:3

resolution: → duplicate
status: openclosed

Changed March 21, 2011 06:31PM UTC by gnarf comment:4

Duplicate of #4228.

Changed January 17, 2012 11:28PM UTC by scottgonzalez comment:5

milestone: 1.later1.9