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.

jsfiddle

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

Popular posts from this blog

curl - PHP fsockopen help required -

HTTP/1.0 407 Proxy Authentication Required PHP -

c# - Resource not found error -