Is it possible to stop an animation? Right now, when I use $('element').transition(x, y) the animation needs to be completed before I can manipulate the x/y etc..

Hope you have a solution for this.

Thanks in advance!

Cheers, Patrick

When using IE 10 and calling this function:

$(this).transition({
  scale:            1.05,
  backgroundColor:  "#8EC3DA",
  borderColor:      "#686868",
  duration:         150
});

I receive this error message:

SCRIPT438: Object doesn't support property or method 'setFromString' 
jquery.transit.js, line 598 character 9

Here's a screenshot:

As of writing, you can see the error in action at http://ryansobol.com by mousing over any of the social buttons.

NOTE: Everything works fine in IE 9, Chrome 19, Firefox 13, and Safari 5.1.

PS - I'm in love with this library. Keep up the great work!

It would be nice to have the option to avoid the queue and apply the transform immediately. Currently, if I want a responsive animation for my slider widget, I have to use use a css transform, which feels wrong :/ (especially since transition requires a vendor prefix).

var transition = 'all ' + duration + 'ms ' + easing;
slider.css({ 
  transform: 'translate(' + sliderOffset + 'px, 0, 0)', 
  'transition': transition,
  '-webkit-transition': transition,
  '-moz-transition': transition,
  '-ms-transition': transition,
  '-o-transition': transition
});

This should be fine or you can make your own version based on it. I've tried to keep the code as DRY as possible. Warning: based on the MDN docs this is very likely to fail on Safari >= 3.0 && < 3.2. I believe only browser sniffing trickery is the only way to avoid this, which should be redundant considering the market share of those versions.

About the event names:

• transitionEnd doesn't exist
• there is no MSTransitionEnd or even if there is, IE supports the w3c name
• opera has 2 differently cased event names

Adding the proper event name to $.support would need a Deferred object and be relatively useless.

Thanks.

References used:

• https://developer.mozilla.org/en-US/docs/Web/Reference/Events/transitionend
• https://developer.mozilla.org/en-US/docs/Web/CSS/transition
• http://msdn.microsoft.com/en-us/library/ie/hh673535%28v=vs.85%29.aspx

jQuery 1.8 was released today, which includes a feature that causes .css(...) to automatically prefix webkit-specific stuff, like transform. Since transit stores its Transform() object in the elem.css("transform"), this was conflicting. It is now stored in transit:transform, and seems to be working great.

Okay, I admit that this going to sound vague but I've narrowed it down every way I can and I think there is a good chance jquery.transit is the reason for this issue (although I'm not 100% sure). Let my describe the issue:

I have jquery.transit running transform origin and rotate on mouseover of an image - so it can happen multiple times in a row. It always works on the first mouseover but does not work for an infinite amount of times: it stops working eventually - maybe on the second mouseover, maybe on the 20th.

There seems to be almost no pattern as to when it breaks:

• after working at least once (never breaks the first time) and as many as 10 or 15 times, the rotate command stops working
• BUT the javascript is NOT breaking because other commands (for example, an .animate() event runs just fine before and after rotate stops working). I verified that js is not breaking with a try catch.
• I can almost certainly reproduce the issue but never in a set pattern
• Depending on what part of the image you mouseover you trigger a different rotate angle and it does seem to break more often when rotating a negative degree - but breaks on other rotate angles as well.

I know this is a long shot but I really like jquery.transit and I was wondering if anyone else has seen this problem? I realize its possible this bug has to do with CSS3 transform or rotate, but I've done a lot of searching and I can't find this problem reported on at all in forums, etc.

My code is in development at the link below, maybe it will make the above description more clear:

http://www.markpruce.com/8ozstudios/

Any debugging advice or help on this would be greatly appreciated! Thanks,

Mark

I'm working on a responsive navigation that uses percentage based values for layout. This plugins seems to do its job with pixel values, but when it comes to percentages (and possibly other units) it breaks.

The following transition gets converted into 100 pixels by the plugin.

productNavigation.transition({ : "+=100%"...

worked in FF 15 but after updating to FF 16 I get the following error:

TypeError: h.setFromString is not a function

...ion(b){return(d(b).css("transform")||new j).get(a)},set:function(b,e){var h=d(b)...

here is the website: http://www.autobusoberbayern.de/de/startseite/

Using the following, with jquery 1.8, I always get one of two errors:

$('#carousel ul').css({ x: '30px' });

Using the source:

Error: TypeError: t.setFromString is not a function

or using the minified version:

Error: TypeError: h.setFromString is not a function

Any idea what could be causing this??

thanks!

The other suggested solution (https://github.com/rstacruz/jquery.transit/pull/62) didn't work for me. This got all of my transitions working correctly.

e.g.

$('#thing').transition({
    '-webkit-filter': 'blur(4px)',
    '-moz-filter': 'blur(4px)',
    '-ms-filter': 'blur(4px)',
    '-o-filter': 'blur(4px)',
    'filter': 'blur(4px)'
    }, 400, 'in-out', function(){...

It'll work, but it won't transition. I tried both blur(0px) as well as none.

Great work by the way! Love the plugin.

Simultaneous transitions on a single element don't seem to work if using multiple calls to $.transit(). For example:

$w.transit( {opacity: 0.3, queue: false, duration:1500} );
$w.transit( {scale:   0.5, queue: false, duration:1200} );

Only scale is animated; opacity jumps immediately from its current value to 0.3.

Thus it seems impossible with jquery.transit to animate two different css properties of an object at the same time, if the transitions have different durations or delays (or if you have other reasons to want to separate the animations into distinct calls to $.transit().

This PR adds support for skew transform, in no more than 10 lines of code.

The transforms skewX and skewY were already supported in current version. However, skew cannot be replaced with them (perhaps there is a way to make such replacement but seems hard to do so).

We may try the following snippets, which lead to different styles:

• transform skew(45deg, 45deg)
• transform skewX(45deg) skewY(45deg)
• transform skewY(45deg) skewX(45deg)

Hello,

Ive installed jquery.transit over npm and when calling the transition method on any element I get the following error:

> temp1.transition({x: 100})

Uncaught TypeError: Cannot read property 'speeds' of undefined
    at r.fn.init.$.fn.transition.$.fn.transit (jquery.transit.js:603)
    at <anonymous>:1:7

When adding the duration temp1.transition({x: 100}, 300) it works fine.

I've been using AnimeJS however it doesn't have a way of returning a value or applying a value without a delay.

These are two I need for the current project I have. Transform properties are a nightmare unless using something like this. I can't find anything that replaces this, however bugs such as not being able to get scale() it always returns 1 regardless is meaning I can't use it.

Is this dead? Can I fork it and start from where you left off?