benbarnett / jquery-animate-enhanced

Extend $.animate() to detect CSS transitions for Webkit, Mozilla, IE>=10 and Opera and convert animations automatically.

jquery.animate-enhanced plugin

Extend $.animate() to detect CSS transitions for Webkit, Mozilla, IE >= 10 and Opera and convert animations automatically. Compatible with IE6+

Tested with jQuery 1.3.2 to 1.8.0

Properties supported: (more to come)

• left : using translate(x, y) or translate3d(x, y, z)
• top : using translate(x, y) or translate3d(x, y, z)
• right
• bottom
• opacity
• width
• height

Note that any properties not mentioned above will simply be handled by the standard jQuery $.animate() method. This plugin adds new functionality without taking any away.

The idea is to simply enhance existing animations with a lightweight 'drop-in' plugin. Those looking for features such as IE transformations & translate() functionality should consider http://plugins.jquery.com/project/2d-transform

Demo

Simple animation demo and documentation found here: http://playground.benbarnett.net/jquery-animate-enhanced/

What it does

The plugin will analyse the properties you're animating on, and select the most appropriate method for the browser in use. This means your transitions on left, top and opacity will convert to a CSS3 transition on Webkit & Mozilla agents that support it, and Opera 10.50+. If the user is on a browser that has no CSS3 transitions, this plugin knows about it and won't get involved. Silent degradation.

Multiple callback mechanisms are created internally to monitor for DOM manipulation and for all 'transitionend' CSS3 events to be picked up. This means you have one neat callback() for the whole animation regardless on whether the plugin is using CSS3, DOM, or both for its animations.

Progressively enhanced CSS3 animations without having to do any browser detection or special CSS, therefore using the same Javascript across your applications and websites.

As this plugin uses CSS3 translate where available, there is an internal callback mechanism to reset the 'left' and/or 'top' properties so that your layout is unaffected.

Usage

Usage is identical to the jQuery animate() function, but it comes with 3 new paramaters, which are totally optional and safe to leave untouched for general use:

avoidTransforms: (Boolean)

By default the plugin will convert left and top animations to the CSS3 style -webkit-transform (or equivalent) to aid hardware acceleration. This functionality can be disabled by setting this to true.

useTranslate3d: (Boolean)

This will be auto-detected and set to true if the browser supports it. Set to true/false to force a specific mode. 3D is recommended for iPhone/iPad development (here's why).

leaveTransforms: (Boolean)

By default if the plugin is animating a left or a top property, the translate (2d or 3d depending on setting above) CSS3 transformation will be used. To preserve other layout dependencies, once the transition is complete, these transitions are removed and converted back to the real left and top values. Set this to true to skip this functionality.

avoidCSSTransitions: (Boolean)

Set this to true to revert to native animate() method, avoiding the plugin entirely. The default for this setting is false, but can be overridden using $.toggleDisabledByDefault()

Useful methods

The following methods have been added to the public jQuery object, which you may or may not find useful:

• $.toggle3DByDefault() Toggle for plugin settings to automatically use translate3d (where available; its safe to set to true even if the browser doesn't support). Returns new setting
• $.toggleDisabledByDefault() Toggle the plugin to be disabled by default (can be overridden per animation with avoidCSSTransitions described above) Returns new setting
• $.setDisabledByDefault(value) Explicitly disable or enable the plugin (can be overridden per animation with avoidCSSTransitions described above) Returns new setting
• $(e).translation() Returns current X and Y coordinates for (e) no matter how the element is being positioned Returns in the format { x: 0, y: 0 }

Note

Since v0.77, the plugin will now automatically use 3D Translations where supported. To override this functionality, you can either use the parameter above, or run $.toggle3DByDefault();

Changelog

1.11 (08/07/2014):

• Merging PR #157, fixes #156 for animating with 0

1.10 (09/04/2014):

• Merging PR #153 Don't try to restore values which weren't saved

1.09 (09/04/2014):

• Merging PR #154 Added support of AMD and Node.js (via browserify) environments

1.08 (16/01/2014):

• Merging PR #147 Access element tag name appropriately

1.07 (06/12/2013):

• Other units, beside '%' should also be kept

1.06 (06/12/2013):

• Merging PR #140 Do not change a user defined display mode for elements, after show/hide

1.05 (14/08/2013):

• Merging PR #124 fix for highcharts clash. Thanks @bensonc!

1.04 (14/08/2013):

• Using fix from issue #69 by @rickyk586 to support percentages

1.03 (19/7/2013):

• Merge PR #129 (Use originalAnimateMethod if a step callback function is provided.) /thx @lehni

1.02 (8/5/2013):

• Fixing use3D default flags. It must explicitly be set to false to disable 3d now, the plugin by default will use it if available. (issue #110)

1.01 (8/5/2013):

• Adding appropriate display value for wider range of elements (issue #121 - thanks smacky)

1.0 (8/5/2103):

• Fix avoidTransforms: true behaviour for directional transitions

0.99 (5/12/2012):

• PR #109 Added support for list-item nodes. FadeIn on tags was omitting the list-style support. (thx @SeanCannon)

0.98 (12/11/2012):

• Merging pull request #106 thx @gboysko - checking for ownerDocument before using getComputedStyle

0.97 (6/11/2012):

• Merging pull request #104 thx @gavrochelegnou - .bind instead of .one

0.96a (20/08/2012):

• Checking event is from dispatch target (issue #58)

0.96 (20/08/2012):

• Fixes for context, all elements returned as context (issue #84)
• Reset position with leaveTransforms !== true fixes (issue #93)

0.95 (20/08/2012):

• If target opacity == current opacity, pass back to jquery native to get callback firing (#94)

0.94 (20/08/2012):

• Addresses Firefox callback mechanisms (issue #94)
• using $.one() to bind to CSS callbacks in a more generic way

0.93 (6/8/2012):

• Adding other Opera 'transitionend' event (re: issue #90)

0.92 (6/8/2012):

• Seperate unbinds into different threads (re: issue #91)

0.91 (2/4/2012):

• Merge Pull Request #74 - Unit Management

0.90 (7/3/2012):

• Adding public $.toggleDisabledByDefault() feature to disable entire plugin by default (Issue #73)

0.89 (24/1/2012):

• Adding 'avoidCSSTransitions' property. Set to true to disable entire plugin.

0.88 (24/1/2012):

• Fix Issue #67 for HighchartsJS compatibility

0.87 (24/1/2012):

• Fix Issue #66 selfCSSData.original is undefined

0.86 (9/1/2012):

• Strict JS fix for undefined variable

0.85 (20/12/2011):

• Merge Pull request #57 from Kronuz
• Codebase cleaned and now passes jshint.
• Fixed a few bugs (it now saves and restores the original css transition properties).
• fadeOut() is fixed, it wasn't restoring the opacity after hiding it.

0.80 (13/09/2011):

• Issue #28 - Report $(el).is(':animated') fix

0.79 (06/09/2011):

• Issue #42 - Right negative position animation: please see issue notes on Github

0.78 (02/09/2011):

• Issue #18 - jQuery/$ reference joys

0.77 (02/09/2011):

• Adding feature on Github issue #44 - Use 3D Transitions by default

0.76 (28/06/2011):

• Fixing issue #37 - fixed stop() method (with gotoEnd == false)

0.75 (15/06/2011):

• Fixing issue #35 to pass actual object back as context for callback

0.74 (28/05/2011):

• Fixing issue #29 to play nice with 1.6

0.73 (05/03/2011):

• Merged Pull Request #26: Fixed issue with fadeOut() / "hide" shortcut

0.72 (05/03/2011):

• Merged Pull Request #23: Added Penner equation approximations from Matthew Lein's Ceaser, and added failsafe fallbacks

0.71 (05/03/2011):

• Merged Pull Request #24: Changes translation object to integers instead of strings to fix relative values bug with leaveTransforms = true

0.70 (17/03/2011):

• Merged Pull Request from amlw-nyt to add bottom/right handling

0.68 (15/02/2011):

• Width/height fixes & queue issues resolved.

0.67 (15/02/2011):

• Code cleanups & file size improvements for compression.

0.66 (15/02/2011):

• Zero second fadeOut(), fadeIn() fixes

0.65 (01/02/2011):

• Callbacks with queue() support refactored to support element arrays

0.64 (27/01/2011):

• BUGFIX #13: .slideUp(), .slideToggle(), .slideDown() bugfixes in Webkit

0.63 (12/01/2011):

• BUGFIX #11: callbacks not firing when new value == old value

0.62 (10/01/2011):

• BUGFIX #11: queue is not a function issue fixed

0.61 (10/01/2011):

• BUGFIX #10: Negative positions converting to positive

0.60 (06/01/2011):

• Animate function rewrite in accordance with new queue system
• BUGFIX #8: Left/top position values always assumed relative rather than absolute
• BUGFIX #9: animation as last item in a chain — the chain is ignored?
• BUGFIX: width/height CSS3 transformation with left/top working

0.55 (22/12/2010):

• isEmptyObject function for <jQuery 1.4 (plugin still requires 1.3.2)

0.54a (22/12/2010):

• License changed to MIT (http://www.opensource.org/licenses/mit-license.php)

0.54 (22/12/2010):

• Removed silly check for 'jQuery UI' bailouts. Sorry.
• Scoping issues fixed - Issue #4: $(this) should give you a reference to the selector being animated.. per jquery's core animation funciton.

0.53 (17/11/2010):

• New $.translate() method to easily calculate current transformed translation
• Repeater callback bug fix for leaveTransforms:true (was constantly appending properties)

0.52 (16/11/2010):

• leaveTransforms: true bug fixes
• 'Applying' user callback function to retain 'this' context

0.51 (08/11/2010):

• Bailing out with jQuery UI. This is only so the plugin plays nice with others and is TEMPORARY.

0.50 (08/11/2010):

• Support for $.fn.stop()
• Fewer jQuery.fn entries to preserve namespace
• All references $ converted to jQuery
• jsDoc Toolkit style commenting for docs (coming soon)

0.49 (19/10/2010):

• Handling of 'undefined' errors for secondary CSS objects
• Support to enhance 'width' and 'height' properties (except shortcuts involving jQuery.fx.step, e.g slideToggle)
• Bugfix: Positioning when using avoidTransforms: true (thanks Ralf Santbergen reports)
• Bugfix: Callbacks and Scope issues

0.48 (13/10/2010):

• Checks for 3d support before applying

0.47 (12/10/2010);

• Compatible with .fadeIn(), .fadeOut()
• Use shortcuts, no duration for jQuery default or "fast" and "slow"
• Clean up callback event listeners on complete (preventing multiple callbacks)

0.46 (07/10/2010);

• Compatible with .slideUp(), .slideDown(), .slideToggle()

0.45 (06/10/2010):

• 'Zero' position bug fix (was originally translating by 0 zero pixels, i.e. no movement)

0.4 (05/10/2010):

• Iterate over multiple elements and store transforms in jQuery.data per element
• Include support for relative values (+= / -=)
• Better unit sanitization
• Performance tweaks
• Fix for optional callback function (was required)
• Applies data[translateX] and data[translateY] to elements for easy access
• Added 'easeInOutQuint' easing function for CSS transitions (requires jQuery UI for JS anims)
• Less need for leaveTransforms = true due to better position detections

Credits

• Author: Ben Barnett - http://www.benbarnett.net - @benpbarnett
• HeyDanno! for his tips on detecting CSS3 support (http://gist.github.com/435054)
• Aza for his gist on CSS Animation wtih jQuery (http://gist.github.com/373874)

jquery-animate-enhanced's Issues

Incorrect relative position animations and jerky opacity

Please refer to this jsfiddle.
http://jsfiddle.net/tUKEM/

Tested with Firefox 5.

Planned support for margin animations?

I was reading through the demo page and saw all of the properties that enhance and missed margin and padding. Are there any plans to bring this in?

cssCallback reacts to different transition

The cssCallback eventhandler doesn't check if the event comes from the dom-node the handler was attached to.

This is a problem if you use jQuery animate to do i.e. a slow fade out of a container-div but have a child-div which also does transition (like due to a mouseover event). So if the transition of the child completes faster, the current event handler will react to THIS transition instead to the parent one.

Replace the first 2 lines of the eventhandler with the following and it should be fine (starting at line 486):

cssCallback = function(e)
{
    if (e.eventPhase != 2) // not at dispatching target
        return;

Support jQuery 1.3.x

Just wanted to point out that this would be useful for some people. As a Drupal 6 user I can't use jQuery 1.4 yet due to compatibility issues (crazy - I know - Drupal 7 will fix that).

If it would be fairly easy or if someone has very few better things to do (not very likely) then at least I would appreciate some kind of backport :)

Elements not returning to their 'original' translated position

If an element had already been transformed/translated, the plugin is overruling this and resetting whatever it was back to 0.

fadeOut() broken

Hi, ben. Great plugin. There should be more people helping.
Ok, is it just me or fadeOut() doesn't work except with argument 0 (which doesn't fade of course).
http://jsfiddle.net/DSjr2/2/

animation as last item in a chain — the chain is ignored?

I don't know if this has to do with delay() in particular, but I have this construction:

$("div#parent").delay('4000').fadeIn('1000');

Once I introduced the plugin, the delay() stopped happening. Inserting queue() solved this though, so it's not a critical problem:

$("div#parent").delay('4000').queue(function() {
$(this).fadeIn('1000');
});

Right negative position animation

I have issue with animation of the elements that already have right negative position.
Example: div with right:-400px position after applying animation({right:60px}) takes right:-460px position, but right position should be just 60px! With left position - everything is ok.

Link: http://jsfiddle.net/tUKEM/9/

opacity fade to same value bug / feature request.

I have a problem where I'm fading opacity to 1 or 0 based on some variable, but it seems to break if I try to fade to the value that it's already at, which means I have to wrap every fadeIn / fadeOut call with a check to ensure that the css opacity isn't already at 1 or 0.. ie:

if(condition === false){
if($('#thing').css('opacity') >0){
$('#thing').animate({opacity:0});
}
}else{
if($('#thing').css('opacity') <1){
$('#thing').animate({opacity:1});
}
}

would be awesome if it could accept animating to the current value and just ignore the call internally.

Play nice with existing transforms

Existing transforms on elements are being overwritten when animating the left/top properties with this plugin.

Initial fix

• Cache existing transforms and re-apply after internal callbacks
• Ignore elements with existing translations (don't want to add too much weight with the Matrix calculations)

Simply adding jquery.animate-enhanced.min.js to my file makes my animations skip back to their starting point. Any ideas why this is happening?

This is happening in Chrome 12.0.742.53 beta-m

Use a proper GPL-compatible opensource license

Seems like you've licensed this code under a non-code and non GPL-compatible license - the Creative Commons license. I would strongly suggest to instead license this under a proper opensource license that is GPL-compatible, otherwise a lot of people won't be able to use it. A BSD-style license would be preferable but even LGPL orLGPL would be better than Creative Commons.

Here's a list of all GPL-compatible licenses: http://www.gnu.org/licenses/license-list.html#GPLCompatibleLicenses

Creative Commons is great for content, graphic etc - but for code one should in my opinion use large and recognized open source licenses to ease compatibility with other open source projects.

slideUp - slideDown using always original animate method

From the changelog I thought the slideUp/slideDown were compatibile with the enhanced animate.
I am using the jQuery-Animate-Enhanced v0.80 and the jQuery v1.6.4.
The slideUp/slideDown animation uses the function original animate using CSS3 features only to set opacity to 1.

display: inline-block changed to block

On line 246 elements are changed to be display block

if (hidden) e.css({'display':display, 'opacity': 0});

This sometimes breaks layouts using inline-block. Can it test for this first and keep the element as inline-block?

Errors reported with queue from 0.60

Find problem with "queue". Take a look to the error console on this page - http://350d.ru/absolute-animation.html
Many reports like this -

"TypeError: Result of expression 'this[f.queue===false?"each":"queue"]' [undefined] is not a function." in jquery.min.js

On page without plugin - no errors - http://350d.ru/absolute-animation-off.html

Left/top position values always assumed relative rather than absolute

As reported by Tim & Thomas on playground comments page.

partially broken with jquery 1.6

I tried the plugin (which is awesome and should be in jQuery core honestly) with 1.6 and it didn't work completely.

I just have a simple animation where i change the left value of a div inside another one. Works fine with jQuery 1.5.2.

With 1.6, the first animation is correctly done but the other ones on the same element won't work then. the div remains blocked at the same position. haven't tested on others yet.

I'm trying to find the fix but I don't know jQuery core so well

Support Percentages and Em Units for Property Values

CSS Transitions and jQuery .animate() both support percentages and em units for property values, but jQuery-Animate-Enhanced currently doesn't. It would be much more broadly useful if it did.

Interferes with .effect() animation

Load http://jsfiddle.net/ZxmS3/1/ then click the button to slide the drawer down, and click again to slide it back up - you'll see the second (reverse) animation is broken, and this is with jQuery-Animate-Enhanced loaded.

Then remove jQuery-Animate-Enhanced (click the X in Managed Resources on the left hand side), click Run, and you'll find that the toggling works absolutely fine.

IE10 support, msTransition

I tried to add this support by adding -ms- to the CSS prefixes and testing for thisStyle.msTransition !== undefined. This worked for a very simple example but it does not work for my site. Instead, nothing happens. I know the replacement animation is called but I don't know enough about what's going on to see where the CSS transition is actually added to the element. On my site, the transition properties are not added, but in the simple example I made (just a div to move $('div').animate()) they do get added.

So while it seems easy, it seems there is something different going on in IE10.

Possibility to selectively use original jquery animate

Sometimes the enhanced animations do not fully work as expected in some browsers or there are some side effects. It would be great to revert to the default jquery animate function in this case, e.g. by passing an additional property, e.g "avoidCSSTransitions: true". This would make it possible to keep all enhanced animations except those that have problems.

Completion callback not triggering reliably with animations using "hide" values

Sample code attached - click on the red boxes to animate and trigger callbacks. Works fine with standard jQuery, but when jQuery Animate Enhanced is loaded, callbacks are dropped. The faster you click the fewer callbacks get triggered... tested in Safari 5.0.5.

<style>
#blah {
    width:980px;
    margin:0 auto;
}
#blah > div {
    width:980px;
    height:200px;
    margin:20px 0;
    background-color:red;
    border:1px solid black;
}
</style>

<div id="blah"></div>
<div id="log"></div>

<script type="text/javascript">
jQuery(function($){
    var blah = $('#blah');
    var log = $('#log');
    var callbacks = 0;
    var iterations = 10;
    log.append('testing '+iterations+' iterations<br>');
    for(var i = iterations; i > 0; i--){
        var child = $('<div id="blah_child_'+i+'"/>');
        blah.append(child);
    }
    blah.find('div').click(function(){
        $(this).animate({marginTop:'hide',marginBottom:'hide',height:0}, {
            duration:300,
            easing:'linear',
            complete:function(){
                $(this).hide();
                callbacks++;
                log.append(callbacks+' callbacks triggered<br>');
                if (callbacks == iterations){
                    log.append('Congratulations, you made it!<br>');
                }
            }
        });
    });
});
</script>

Add rotate support

Here is patch to support it for standard jquery animation https://github.com/zachstronaut/jquery-animate-css-rotate-scale/ by @zachstronaut

Scale support?

Will scale (and scale3d) be supported in an upcoming release?

Thank you for the plugin!

Leading comma in transition-property

Insert the following lines in _applyCSSWithPrefix between lines 337/338

if (cssProperties[cssPrefixes[i] + 'transition-property'] != "")
    cssProperties[cssPrefixes[i] + 'transition-property'] += ", ";

Error when running animation on elements that don't have styles (e.g. comments)

Sample code:

jQuery('<!-- test -->').appendTo('body').fadeIn();

Under normal jQuery (1.6), runs fine, but with the animate enhanced plugin loaded, produces:

TypeError: Result of expression 'cStyle' [null] is not an object.

Conflict with existing webkit-transition animations

It seems the plugin override existing webkit-transition defined.

If i have a div with :

    -webkit-transition: -webkit-transform 300ms ease-out;
    -webkit-transform : translate3d(0, -600px, 0);

    &.ui-state-active {
        -webkit-transform : translate3d(0, 0, 0);
    }

And that i apply a fadeTo animation, it will destroy existing animation (defining wekit-transform-property etc.)

Somehow we should be able to disable the plugin for a specific animation. Or the plugin should check for existing transitions and be able to handle them.

Great work anyway,
Regards,

Can't go back to -100 in top value after setting 0

  if ($errorMessages.size() > 0) {
    $errorMessages.animate({'top': 0}, 'fast', function () {
      setTimeout(function () {
        $errorMessages.animate({'top': -100}, 1000);
      }, 2000);
    });
  }

Maybe it has to do with setTimeout?

I propose the following change in the _applyCSSTransition() function:

      // fix 0 issue (transition by 0 = nothing)
      if (isTranslatable && offsetPosition === 0) {
        if (meta[stashedProperty] > 0) {
          offsetPosition = 0 - meta[stashedProperty];
        }
        else {
          offsetPosition = 0 + meta[stashedProperty];
        }
        meta[property] = offsetPosition;
        meta[stashedProperty] = 0;
      }
    }

delay doesn't work with 0.74 and 1.6.1

http://jsfiddle.net/L2wFA/2/

Removing the library makes it work again.

cumulative/buffered transforms?

How to accomodate rapid clicking on a transform trigger?
See www.dustystruck.com/webkit

On rapid clicking, 'move 1' can't seem to calculate the start value properly.
'move 2', which uses a webkit transform directly, works properly.

bug or faulty deployment?

thanks!

Issue with Animations not resetting and/or flying off the screen

set the test running then went off to make dinner and watch some TV... when I came back, I found this:
http://i56.tinypic.com/o56hhh.png

And soon after I grabbed the image the blue box shot off the right side of the screen again... sorry! :(

fadeOut not working after fadeIn

$this.fadeIn(500, function() { $this.fadeOut(500); });
Is not working for me with latest version on chrome-beta, there is no fadeOut!

I guess fadeOut should use css({opacity:0}) or fadeIn should clean styles after it (webkit-transform, etc.).

opacity fadeIn ignores div's CSS opacity value

I am using jquery to fade in a mask behind a modal div. Very common. The mask has an opacity of 0.85 set in the CSS, like this:

mask {

position:absolute;
left:0;
top:0;
z-index:9000;
opacity: 0.85;
background-color:white;
display:none;
}

When I fadeIn() with animate-enhanced, the mask div is 100% opaque instead of 85%.

translation with 0 offset is broken

Animating an elements position where old and new position are the same moves the element to position 0 instead of leaving it at its current position.

See
http://jsfiddle.net/YBQu6/

slideToggle not working on Webbit ?

I not be able to make slideToggle working on chrome / iPad.
The animate with opacity, left, top is amazing on iPad, but the slideToggle() is not working.
Did you notice that ?

effect('pulsate') not working

probably there's something wrong with the css produced

Support animate({opacity: 'toggle'}

As raised by sonaatti on blog comments

apple device problem.

If you run the animation with the basic function left += 10 px, you scroll the page with your finger in apple device(eg iPhone). The animation would jump around and back to normal within a few seconds. Also It stop the working with sprite sheet (css background-position) while the animation is performing.

anim() callback indifferent to which animation ended

Seems that nested anim() callbacks get triggered by a parent's animation ending.

In the following example, d2 should turn orange last, but d1's callback gets called when d3's ends

Sample code:

    <style type="text/css" media="screen">
        div {
            border: 1px solid black;
            padding: 30px;
            width: auto;
        }

        #d1 {
            border-color: red;  
            width: 500px;           
        }

        #d2 {
            border-color: purple;               
        }

        #d3 {
            border-color: blue;
        }
    </style>

    <script type="text/javascript" charset="utf-8">         
        $(document).ready(function() {              
            window.go = function() {
                $('#d3').anim({ height: '100px' }, 1, 'linear', function() {
                    $('#d1').anim({ width: '130px' }, 3, 'linear', function() {
                        $('#d2').css('background-color', 'orange');
                    });
                });
            }               
        });         
    </script>               
    <div id="d1"><div id="d2"><div id="d3"></div></div></div>
    <a href="javascript:go()">TEST</a>

"Flicker" on animation complete on iOS

I've been developing a custom jQuery carousel for a private client and wanted to try integrating this enhanced animate method so the carousel animations would function smoothly in iOS..

The problem comes when I invoke an animation -- I get a slight flicker on animation complete. On complete, I append elements to the tail end of the container that is being animated and then manipulate its "left" css property to reset its slide position. Now, I know it would make sense that my problem lies within my appending new elements and manipulating the container's css.. But, when I remove the jQuery-Animate-Enhanced plugin, it works fine (no flicker).

Here's a link to a live demo:
http://devincastro.com/demo/

fadeToggle() broken in FF5/Win

Just letting you know that fadeToggle() appears to be broken in Firefox 5.0 (Windows 7 SP1). Nothing happens, but no JS errors either. It just dies silently.

Note: If I switch over to fadeIn() / fadeOut(), it works fine, mind you.

Absolute position values not working with negative values

As raised & solution offered by Maurice van der Zwaan

Our fix was to use :

function _cleanValue(val) {
return parseInt(val.replace(/px/i, ''));
//return Math.abs(val.replace(/px/i, ''));
};

.animate() callback passes wrong object

BRILLIANT work with this plugin. Love it!

But think I found a bug... This code works with the default jQuery animate() but fails with your version.

$('img').animate({left: '300px'}, 3000, function() {
    console.log(this);
    this.src = 'new_image.jpg';
});

In standard jQuery, this in the callback refers to the actual DOM object, whereas in your version it's the jQuery object, with the DOM object as array index [0].

It's relatively simple to work-around, but took me ages to figure out the cause of the problem. How hard is it to fix this?

Simon.

Many jQuery animations do not animate, callbacks are not called

Many jQuery animations do not animate, callbacks are not called

Example With jQuery-Animate-Enhanced
http://www.tothconstruction.com/Website2010/?p=portfolio

Example Without jQuery-Animate-Enhanced
http://www.tothconstruction.com/Website2011/?p=portfolio

Use 3D transitions by default

It would be nice to have an option that would allow 3D transitions to be used by default, instead of having to set the option each time

$(el).is(':animated') not reporting

Need to add animated state on CSS transitions as per jQuery core.

show/hide support

Any chance of being able to specify { width: 'show' } and suchlike without falling back to the default jQuery animate method?

Scope in callback function

First off, thank you for developing this, it is very nice for iOS hardware acc.

I see an issue in the callback function:
$(this) should give you a reference to the selector being animated.. per jquery's core animation funciton.

It is returning the window object for me.

Im trying to hide() the animated element when the animation is complete.
Of course I can just recall the selector.. but just wanted to point that out.

Highcharts Library Conflict

I've created a JSFiddle replicating the issue here: http://jsfiddle.net/taitems/ZqU7M/

It's hard to know who is at fault here, so I've posted on the Highcharts forum making them aware of the issue here: http://highslide.com/forum/viewtopic.php?f=9&t=11637

Thanks for your amazing work,
Tait.

Integrate with FX to support animation shortcuts (slide*)

As raised by justwrote. Feature now on the roadmap.