图像点击后失去不透明度过渡答案

【问题标题】：Losing opacity transition after image click图像点击后失去不透明度过渡
【发布时间】：2014-05-30 23:30:02
【问题描述】：

我正在使用 css 不透明度过渡来进行鼠标悬停，但是每当您单击图像然后单击图像外部（以将图像带回 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

【问题讨论】：

标签： html css

【解决方案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');
    });
});

【讨论】：