Bootstrap：img-responsive [Opera only] 的鼠标输入动画问题

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 的对象时出现 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/