单击图像后失去不透明度转换

I'm using a css opacity transition for a mouse hover but whenever you click on the image then click outside the image (to bring the images back jquery) the css transition doesn't work anymore.

我正在使用鼠标悬停的css不透明度转换,但每当您单击图像然后单击图像外部(将图像带回jquery)时,css转换不再起作用。

my css transition

我的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;
    }

Instead of posting a whack load of code I thought jsfiddle would be better.

我认为jsfiddle会更好,而不是发布重载代码。

JSFIDDLE

1 个解决方案

#1

It's because the inline styles are overriding the CSS styles. You can remove the style attribute once you're done with the animation and that will make sure it doesn't override the CSS styles. http://jsfiddle.net/azizpunjani/Djby5/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');
    });
});