search

louisremi / jquery.transition.js

Upgrade jQuery's .animate() method to use CSS3 Transitions in modern browsers.
435 stars 81 forks source link

Opacity transition not working #1

Closed brokenseal closed 12 years ago

brokenseal commented 13 years ago

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

louisremi commented 13 years ago

Interesting, I'll investigate. Thanks for reporting.

louisremi commented 13 years ago

Hi David,

I'm trying to reproduce you issue, with no luck: http://jsbin.com/oneju4/2/edit Everything seems to work as expected.

Could you provide a test case using jsfiddle of jsbin please?

Thank you in advance,

Louis-Rémi

brokenseal commented 13 years ago

I tried your snippet and everything worked fine! So I further investigated and I found out the reason why it wasn't working on my web page. I'm using a plugin for easing with CSS 3 ( https://github.com/jaukia/easie ) and it looks like it clashes with yours, but only under particular circumstances, which are:

  1. An animation on opacity on an element, without easing
  2. An animation on left position on a different element, with easing

If I activate easing on the first element, everything works fine! I'm now having a look on the easie.js plugin to see why this is happening, I'll might as well warn the project owner or just fork it.

By the way, during my research I found a different situation on which it looks like your plugin doesn' work properly, have a look: http://jsbin.com/oneju4/4/edit

It looks like if you animate on left position AND opacity, it will only animate on the position. Is it a known limitation?

Cheers! David

brokenseal commented 13 years ago

I just now realise that your plugin is disabled on special easing... sorry, I won't bother you anymore on this subject :P

louisremi commented 13 years ago

Hi David,

thank you for pursuing your investigations, I'll look into your testcase. CSS3 transitions are disabled with special easings, but animations should still work in that case.

Best regards,

Louis-Rémi

phongjalvn commented 13 years ago

I also have this issue, but I didn't use special easing. Can you investigate this one? http://jsbin.com/oneju4/7/

louisremi commented 12 years ago

Again, both test case that have been submitted here are working correctly in my browser. Please open new bugs with more details if you still encounter those problems. Thanks.