html - Losing opacity transition after image click -
i'm using css opacity transition mouse hover whenever click on image click outside image (to bring images jquery) css transition doesn't work anymore.
my css transition
.grid li a:hover img { -webkit-transition: opacity .2s ease-in; -moz-transition: opactiy .2s ease-in; -ms-transition: opacity .2s ease-in; -o-transition: opacity .2s ease-in; transition: opacity .2s ease-in; opacity: 1; } .grid:hover li { -webkit-transition: opacity .2s ease-in; -moz-transition: opactiy .2s ease-in; -ms-transition: opacity .2s ease-in; -o-transition: opacity .2s ease-in; transition: opacity .2s ease-in; zoom: 1; filter: alpha(opacity=100); opacity: 0.3; }
instead of posting whack load of code thought jsfiddle better.
it's because inline styles overriding css styles. can remove style attribute once you're done animation , make sure doesn't override css styles. http://jsfiddle.net/azizpunjani/djby5/1/
$('#hidden').click(function() { $grid_li = $('.grid li'); $grid_li.find('img').animate({ width: '339px', height: '211px' }); $grid_li.siblings().fadein(); $grid_li.siblings().animate({opacity: 1, top:'0px'}, 1000, function(){ $(this).removeattr('style'); }); });
Comments
Post a Comment