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/

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.

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');
});

As raised by justwrote. Feature now on the roadmap.

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.

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

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>

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,

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

Tested with Firefox 5.

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/

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.

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%.

$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.).

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;

As reported by Tim & Thomas on playground comments page.

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.

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.

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/

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.

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)

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! :(

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.

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 ?

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

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

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!

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

  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;
      }
    }

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

As raised by sonaatti on blog comments

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, ''));
};

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

Removing the library makes it work again.

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

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.

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.

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.

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>

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.

probably there's something wrong with the css produced

Insert the following lines in _applyCSSWithPrefix between lines 337/338

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

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 :)

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.

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?

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?

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

Thank you for the plugin!

This is happening in Chrome 12.0.742.53 beta-m

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

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

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.

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/