html - 画像のクリック後に不透明度の遷移が失われる

Question

マウスホバーにcss opacity transitionを使用していますが、画像をクリックしてから画像の外側をクリックすると(画像をjqueryに戻すため)、cssトランジションが機能しなくなります。

私のCSSトランジション

 .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;
    }

大量のコードを投稿する代わりに、jsfiddle の方が優れていると思いました。

JSFIDDLE

Answer 1

これは、インライン スタイルが CSS スタイルをオーバーライドしているためです。アニメーションが完了したら、スタイル属性を削除できます。これにより、CSS スタイルが上書きされないようになります。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');
    });
});