Comment Archive for CSS Transitions via jQuery Animation

This is just a raw copy of the comments left on my blog before I started redirecting to GitHub.

  1. Ajaxian » CSS Transitions Shim; Getting transition support into other browsers

    [...] Ruter has developed a very nice shim that allows you to get CSS Transitions support in browsers that do not have the WebKit [...]

  2. Adam Blake

    Since jQ 1.3, $.browser deprecated, use: $.support

  3. Paul Bakaus

    Nice! I’ve done something very similar with CSS Transforms, maybe you’ve seen the blog post: http://paulbakaus.com/?p=11, the source is now available at http://code.google.com/p/transformie/. Similar way of providing functionality, but I’m not using DHTML Behaviours here but mostly onpropertychange.

  4. Benjamin D.C.

    Thanks for this one, this is brillant!

  5. Chris

    It’s nice to see that someone took the idea further and developed an innovative implementation (I didn’t know about XBL and DHTML behaviors before) for jQuery. Great that you’ve not just ported my script to jQuery, but came out with a different (for pure CSS Animations faster + better) approach!

    Chris Schneider
    (author of “CSS Effects for mootools”)

  6. Elijah Grey

    On <Firefox 3.1, can’t you just use an application/xml data: URI?

  7. Weston Ruter

    @Elijah Grey: yes, in FF3.1 we can reference XBL documents with data: URIs https://developer.mozilla.org/en/XBL/XBL_1.0_Reference/Elements#binding

    I didn’t incorporate this feature yet, but it’ll be good to add once FF3.1 is out.

  8. Jim Jeffers

    Awesome stuff! I’m going to try it out and hopefully start using it in my projects. I love CSS transitions and webkit. Kudos to allowing us to rely on these handy transitions in the majority of web browsers.

  9. Jason Newlin

    Well done, looks really nice. OH, @Jim Jeffers – I am excited to see what you come up with on some of your projects, while dominating the world.

  10. Andy

    This is pretty nice.
    Whatever server that ReBath Oregon is hosted on seems really fast!

  11. Weston Ruter

    Someone has implemented a Cubic Bezier timing function compatible with -webkit-transition-timing-function.

  12. Henrik Joreteg

    Very impressive work. Quite an ambitious project, I didn’t think this could be done in a way that supported IE7.

  13. Andrey Zakharov

    Wow! This is really the bridge from rude reality to the melodious future.
    some points about CSS names:
    #content, #left, #right { /*@transition-rule@*/ .... }

    will NOT work as base rule. Workaround:
    #content { /*@transition-rule@*/ .... }
    #left { /*@transition-rule@*/ .... }
    #right { /*@transition-rule@*/ .... }

    Also, check the link of “PHP file” in article – it’s now broken (links to code.google)

    Thanks!

  14. Weston Ruter

    @Andrey: Thanks pointing this out. I also fixed the links to Google Code.

  15. Ben Barnett

    In case people are interested, I have written a jQuery plugin to automatically enhance the $.animate function to use CSS3 transitions on browsers that support it. You don’t have to change any of your Javascript, this plugin simply takes care of the rest once its included. Hope its of use:

    http://playground.benbarnett.net/jquery-animate-enhanced/

  16. Cemre Gungor

    I did a quirky proof of concept about this a bit before you. Glad you implemented it fully!

    http://cantuse.it/2009/12/proof-of-concept-automatic-transition-animation-for-css-hovers-with-jquery/

  17. Ben Barnett

    Hadn’t seen that, nice! I’m still working on the plugin daily but the more its being used across the web the more fixes are being applied. Its pretty solid in a complex environment now and is making life with iPad compatibility much easier.

  18. Jonathan Brachthäuser

    Hey, that really great work. I had something similiar in mind. Nice to see it already working :)

    I am experiencing Problems with the new Firefox 4.0 Beta 6. The Elements somehow disappear in that Browser. (Errorconsole output: XBL-file is incorrect. Did you forget a Bindings-Tag? and Error: FAH_getOutputNodeById: id is null!!’ when calling method: [nsIConsoleListener::observe])

    I hope this helps.

  19. Weston Ruter

    Thanks, Jonathan. Since Firefox 4 supports CSS Transitions natively, the script should be modified to abort as it does in Safari/Chrome when viewing in Firefox 4. I haven’t yet got my feet wet in Firefox 4, but if you’d like to figure out why the native-detection isn’t working, please submit a pull request to the repo on GitHub and I can apply it. Thanks!

  20. Nacho Coloma

    Maybe you should consider registering it as a modernizr polyfill. AFAIK there is no registered library for transitions. Combining it with yepnope would also fix the “what if my browser already supports transitions” thing.

    Great work!

  21. Pedro Santos

    Hi Weston.
    First of all, let me thank you for this plugin.

    I’m having a little trouble in IE9 with it though – It keeps throwing this error when debugging:

    SCRIPT5007: Unable to get value of the property 'replace': object is null or undefined
    jquery.css-transitions.min.js, line 8 character 3121

    Can you help me out on this?
    Thank you.

  22. Pedro Santos

    Hi again Weston.
    Been trying to get everything to work on IE but with no success.
    Keep getting ‘undefined’ error on IE8 and 9, as well as an error related to bindings.php (the object do not support this property or method).

    Is anybody else having this problems?

    Cheers.