search

louisremi / jquery.transition.js

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

Opacity animate don't work #24

Open michka opened 12 years ago

michka commented 12 years ago

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

michka commented 12 years ago

I found one solution, if I put for example : padding:0 on the animate function like this the fade effects works !

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({padding:0, opacity:1.0},800,function() { $active.removeClass('active last-active'); }); }

I have the same problem with : $('#message').animate({'opacity':'1'}); there is no animation but with $('#message').animate({'padding':'0','opacity':'1'}); it's ok !! In chrome and safari the plugin use 'webkit-transform' and in firefox it use 'transform' but the problem is the same for all these browsers.

Anyone know the good solution ?? Thanks

mamzellejuu commented 12 years ago

it worked well in this version : https://github.com/addyosmani/css3-transition-fallbacks/blob/master/js/jquery.transition.js otherwise I have the same problem than you with the current version on github

oo12 commented 12 years ago

Which version of jQuery are you using? jquery.transition.js isn't really compatible with 1.8+ yet. Sticking with 1.7.2 will solve a bunch of problems.

michka commented 12 years ago

I use the 1.7.2 and thank you Mamzellejuu, it's ok now but is it the same plugin ??

mamzellejuu commented 12 years ago

yup just a old version

michka commented 12 years ago

Ok but with this old version I have some new problems with fadein/fadeout. So I think the best way for me is to use the last version of this plugin and put padding:0 before each opacity. May be future version will correct this bug ??

megasmack commented 11 years ago

Having the same issue as michka. Animating 0 padding before hand also fixed my problem.