Question

情况：我有以下简单的jQuery代码：

 $('img').each(function()
        {
            $(this).mouseenter(function()
            {
                $(this).css('opacity','1');
            });
            $(this).mouseleave(function()
            {
                $(this).css('opacity','0.4');
            });
        });

使用CSS规则：

    img
    {
        opacity: 0.4;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }

用于向图像添加简单的不透明度变化动画（悬停时）：

<div class="well"><img src="" class="img-responsive" alt=""></div>

https://jsfiddle.net/k4afv6fk/1/

问题： img-responsive类似乎在这里扮演小错误 - 每次动画继续时，图像重新缩放（约1px）几次，然后返回原始大小。它看起来不太好。

问题：当img-responsive对象被动画时，有没有办法防止1px缩放？如果没有img-responsive类，问题就不会发生，但我希望这个图像能够响应：）

@Edit：我刚才发现，这个问题只发生在Opera浏览器下。有没有办法改进代码以正常使用Opera？

Answer 1

这可以如前所述在不使用javascript的情况下完成

CSS：

   img
    {
        opacity: 0.4; //include this css lastly, and if this doesn't work add !important
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
    }
 img:hover{
    opacity:1; //include this css lastly, and if this doesn't work add !important after 1
    }

HTML：

<img class="img-responsive" src="http://joombig.com/demo-extensions1/images/gallery_slider/Swan_large.jpg">

小提琴：https://jsfiddle.net/k4afv6fk/

Answer 2

试试这个：

img
{
    opacity: 0.4;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

P.S。前缀属性应该在未加前缀的属性之前。（请查看我们对使用:hover而不是jQuery代码的评论。）

Bootstrap：鼠标输入动画问题与img-responsive [仅限Opera]

2 个答案: