louisremi / jquery.transition.js

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.

jquery.transition.js

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.

How to use it?

Once the plugin has been loaded in the page, the job is done. The full jQuery animation API is still available and functionnal, in both transitions compatible browsers and incompatible ones. New: color animations (text or background) and special easings work out of the box!

When are CSS Transitions used?

The plugin uses feature detection to turn transitions ON in the following browsers:

• Chrome
• Safari 4+
• Firefox 4+
• iOS Safari
• Android browsers

Although CSS3 transitions are implemented in Opera, the implementation has too many bugs to be usable from the DOM API.

Note that transitions are turned OFF under certain circumstencies:

• when a step function is used
• when the animated object is not an element

How different is it?

Unlike other transition polyfills, this plugin is not a monkey patch over jQuery animation mechanism. It is actually a patched version of effects.js (animation component), stripped from the redundant code to make it a lightweight plugin.

The main benefit is that the full jQuery API is available. Even better, it has been designed to be compatible with cssHooks. The first compatible one is jquery.transform.js. Others will follow.

jquery.transition.js has been tested against jQuery unit-tests, and only 5 of them fail (under investigations). It benefits from the experience of writing csstransition.net to workaround implementation quirks.

When should I use it?

In any case, it is a good practice to test animations both with and without the plugin to see if the benefit is real.

License

MIT Licensed http://louisremi.mit-license.org/, by @louis_remi

PS: Looking for jquery.hoverTransition.js? This project is no longer maintained as it has never met my own expectations. A backup of the code is available in the download section.

jquery.transition.js's Issues

fadeIn() not fading in

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.transition.js" type="text/javascript"></script>
<script type="text/javascript">
    $("#test").click(function()
    {
        var self = $(this);
        self.fadeOut(1000, function() { self.fadeIn(1000); });
    });
</script>

When I don't include the jquery.transition.js I click the

and it will fade out then fade back in. But when I include the jquery.transition.js it will fade out but not fade in properly.

Timer keeps running (timerId is never cleared)

After doing an animation using the traditional animation function (In my case, I was using a non-DOM object), the tick timer continues to run continually. This causes css transitions to halt as soon as the next tick hits (pretty much instantaneously).

I've been able to fix it by adding:

if(timerId){
    clearInterval( timerId );
    timerId = null;
}

inside the if(done) statement in the custom function. I can do a pull request if you would like.

moar easing

Hey there,

Just taking a peek at this project and I saw that you turn it off for special easing. I approximated all the Penner equations that are doable in CSS, so you could include those as well. http://matthewlein.com/ceaser/

Ben Barnett did it in a similar project:
https://github.com/benbarnett/jQuery-Animate-Enhanced
and relavant pull:
benbarnett/jquery-animate-enhanced#23

Is slideDown() working?

$(x).slideDown() is just showing x without animation instead of sliding it down. slideUp() seems to be working.

Nothing works on Firefox 3.6

Hey

I've hoped this would be a great solution for all the CSS3 cross-browser transitions, but unfortunately the plugin doesn't behave on FF 3.6.
I'm getting:

curRule.style is undefined (on line 65)
transition = curRule.style["transition-property"];

This is using the provided test (animated menu with padding).
It works in IE8, but not in FF3.6 I'm afraid.

$.animation() + scrollTop issue

When jquery.transition.js has been included in a page, the scrollTop animations (example below) stop working. Could jquery.transition be trying to animate this property with css transitions? (which, to my knowledge isn't possible)

  $('body').animate({
    scrollTop: 0
  }, 300);

Is there a way to whitelist properties? So that they're always animated with .js?

CSS3 animation doesn't play when using %

Bug reproduced :
http://jsfiddle.net/SgP7H/6/

It happens of course only in browsers supporting CSS3 transitions (FF, Chrome)

Error when $.animate with duration=0

When calling with duration=0, e.g. $.animate({...},0,easing,callback), after loaded jquery.transition.js, the script throws an error.
TypeError: Object #<$> has no method 'update'

I know a durationof zero shouldn't be passed to $.animate(), which unluckily do happen sometimes, and the original jQuery script will treat it properly. Please, apply a small (probably one-line) fix to avoid css-transition?

Opera support

Hi there,

Does this statement still hold in your opinion? "Although CSS3 transitions are implemented in Opera, the implementation has too many bugs to be usable from the DOM API."

I just had a look at csstransition.net in Firefox 16, Chrome 22, Opera 12.02 and Opera Next. According to my tests, Opera and Opera next have more letters on the bottom than the others:

Firefox 16: 6 boxes on the bottom:

Chrome 22: 8 boxes on the bottom:

Opera 12: 9 boxes on the bottom

Opera 12.10 beta: 9 boxes on the bottom

Is there a less subjective measure of what bugs are required to be supported in this lib?

Thanks!

Broken in Firefox, TypeError: e[method] is not a function on line 319

Works fine in Chrome 23 but busted in Firefox 16. Also using jQuery 1.8.2.

Opacity transition not working

Hi,
I'm currently using your plugin for a slideshow that i wrote and testing it I found out that a simple animate on opacity simply does not work.

For instance, if you write:

$('div').animate({ opacity: 0 }, 3000);

the div disappears instantly.

I'm currently working on Ubuntu with the latest release of Chrome (11 beta).

Everything else works wonderfully though! :)

Cheers!
David

jQuery._mark / jQuery._unmark is missing from jQuery 1.8 source

which makes it unusuable in some browsers. I used jquery-1.8rc1.js for checking.

Uncaught TypeError on jQuery.show({Number}, {Function})

$("#id").show(100, function () {});

Uncaught TypeError: Object # has no method 'show' jquery.transition.js:321
doAnimation jquery.transition.js:321
jQuery.extend.dequeue jquery.js:1895
jQuery.fn.extend.queue jquery.js:1938
jQuery.extend.each jquery.js:611
jQuery.fn.jQuery.each jquery.js:241
jQuery.fn.extend.queue jquery.js:1931
jQuery.fn.extend.animate jquery.transition.js:374
jQuery.each.jQuery.fn.(anonymous function) jquery.js:9016
jQuery.effects.e.fn.extend.show jquery-ui-effects.js:6

a bug in ie8 browser

It is nice to see your jquery plugin for css3 animation, it works well but it is seems like you require a jquery which version 2.x. jQuery 2.x is not support the ie8- browser anymore so that your plugin does not work in ie-8.

.fadeIn() and .fadeOut() does not work when using jQuery 1.8.0

Refer to this jsFiddle: http://jsfiddle.net/vNHrY/

.fadeIn() and .fadeOut() works fine with jQuery 1.7.2 but does not work with jQuery 1.8.0.

Opacity animate don't work

Hello,

I use this function below for fade images gallery with opacity but there is no fade with jquery.transition :

function slide() {
var $active = $('.pics IMG.active');
if ($('.pics > *').length < 2) { return false; }
if ($active.length == 0) $active = $('.pics IMG:last');
var $next = $active.next().length ? $active.next() : $('.pics IMG:first');
$active.addClass('last-active');
$next.css({opacity:0.0})
.addClass('active')
.animate({opacity:1.0},800,function() {
$active.removeClass('active last-active');
});
}

Can you help me ?
Thank you

Uncaught TypeError: Object #<cZ> has no method 'show' in JQuery 1.8.x

Call stack was

Uncaught TypeError: Object # has no method 'show' jquery.transition.js:321
doAnimation jquery.transition.js:321
p.extend.dequeue jquery.min.js:2
(anonymous function) jquery.min.js:2
p.extend.each jquery.min.js:2
p.fn.p.each jquery.min.js:2
p.fn.extend.queue jquery.min.js:2
jQuery.fn.extend.animate jquery.transition.js:374

Android browser not working correctly with tranisition and transform.js

Hi,

I noticed an issue when trying to animate an element's tranform using transition.js and transform.js on the android browser. The issue is that the browser doesn't seem to be setting the final transform property of the element, so if the animation is called twice, the second animation doesn't begin from where the first animation ended, but from where the element was loaded initially.

I have included a small html page that demonstrates this issue. You will notice that the android browser treats the animation differently than other browsers. You will also notice that if you remove the script tag for transition.js, the animation will work as expected.

I tested this using a T-Mobile G2 and a Nexus One both running android 2.3.4.

<html>
<head>
    <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
    <script type="text/javascript" src="jquery.transform.js"></script>
    <script type="text/javascript" src="jquery.transition.min.js"></script>
    <style>
        #mydiv {
            background: red; 
            width: 100px; 
            height: 100px;
        }
    </style>
</head>
<body>
<button id="mybutton">Click Me</button>
<div id='mydiv'></div>
<script type="text/javascript">
    $(document).ready(function() {
        $("#mybutton").click(function() {
            $('#mydiv').animate({
                transform: 'translate(50px, 10px)'
            }, 'slow', function() {
                    $('#mydiv').animate({
                        transform: 'translate(500px, 0px)'
                    }, 'slow');
            });
        });
    });
</script>
</body>
</html>

Strange beviour of jquery.hoverTransition.js

I have an issue in IE9 when trying to implement two different CSS3 transitions on two ULs.
You may check it live here :
http://www.demo.detheme.com/ie/

Can you take a look at it ?
Thanks

Style properties overriding CSS properties

Hi,
I'd like the plugin to add every single specified css property instead of going for the all-in-one css property to set a css transition.
For instance, if I want to set a transition-timing-function on the css and activate a transition with the plugin, the plugin actually overrides the transition-timing-function. The same goes with the transition-duration.

Cheers,
David

animating 2 properties sets the last property in transition twice

when running an animation command with 2 properties the generated css on the element is wrong.
to reproduce run this command:
$element.animate({left: '0px',opacity: 1},10000,'linear')
the css that is generated is:
-webkit-transition: opacity 10000ms linear, opacity 10000ms linear
instead of:
-webkit-transition:left 10000ms linear, opacity 10000ms linear

it seems that the last property is being inserted to the css instead of the first property.

animations now jerk and splutter ?

Hi, I'm not sure if I'm missing something, but when adding this script it suddenly makes my jQuery animations quite awful.

I'm using the supersized jq plugin for a full screen background slideshow and I'm animating the height of div to create a footer that slides out on a click event and slides back appropriately. This all works spectacularly well on a desktop machine, on a macbook pro, an iphone 3, a variety of blackberries and I've even managed to get it to run quite well under IE8.

To my surprise, the animations are absolute crap on an IPad 2. Thus I have come in search of something in line with this script. (as I understand that one can get far greater results by employing the CSS3 animation methods for ipad )

Unfortunately it seems the animations are now dismal no matter where I view them, am I missing something? are there know conflicts I should be aware of, or something I've overlooked in my ignorance?

any help or insight would be greatly appreciated.

thanks.

Does not handle colors correctly

Attempting to animate colors does not work if jquery.transition is included in the page. See this jsFiddle

If you move the mouse over the black square, it should change colors. But nothing happens. If you remove the jquery.transition.js resource, then it works correctly.

I stepped into the code and the problem is that jquery.transition's new animate method is attempting to set backgroundColor to redpx (it thinks it needs to append a unit to the style property)