jquery - 悬停图像在 FF Chrome 中摇晃，但在 IE10 中不摇晃

Question

我在悬停时扩展图像的两侧。它在 IE 10 中运行完美，但在 FF 和 Chrome 中运行不佳。图像在扩展时会抖动。不确定是 css 还是浏览器问题。这是我正在使用的代码

HTML -

<div class="welcome-message-1">
    <div class="expanding-block expanding-block-a content-left desktop-left">
        <div class="expanding-block-inner">
            <img class="expanding-block-background" src="http://demo-pinksquid.co.uk/fiddletest/1319512_orig.jpg" />
            <img class="expanding-block-background-contracted" src="http://demo-pinksquid.co.uk/fiddletest/1319512_orig.jpg" />
        </div>
    </div>
</div>

<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>
<p>dsadsadasd</p>

CSS

.expanding-block-a {
    height: 245px;
    margin: 0 auto 2px;
    max-width: 1030px;
    overflow: hidden;
    position: relative;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    width: 100%;
}
.expanding-block-a .expanding-block-inner {
    height: 245px;
    left: 50%;
    margin-left: -550px;
    margin-top: -110px;
    position: relative;
    top: 50%;
    width: 1100px;
}
.expanding-block-a .expanding-block-background-contracted {
    display: block;
    width: 1100px;
}
p {
    height:50px;
}
.expanding-block-a.hover, .no-js .expanding-block-a:hover {
    max-width: 1100px;
    height: 245px;
}
.expanding-block-a .expanding-block-background {
    display: none;
    height: auto;
    width: 1100px;
}
.expanding-block-a.hover .expanding-block-background, .no-js .expanding-block-a:hover .expanding-block-background {
    display: block;
}

j查询

jQuery(document).ready(function ($) {
    $('.expanding-block-a').hover(

    function () {
        $('.expanding-block').addClass("hover");
    },

    function () {
        $('.expanding-block').removeClass("hover");
    });
});

有趣的是，如果没有浏览器滚动条，那么它在所有浏览器中都能完美运行。一旦你获得滚动条，它就会开始摇晃。出于调试目的，我添加了几段以供查看。

Jsfiddle:http://jsfiddle.net/fAm6V/1/

请减少 jsfiddle 中的 html/javascript 窗口栏，以便获得完整的 ImageView 。

Answer 1

删除您在以下 CSS 上的 2px:

.expanding-block-a {
    height: 245px;
    margin: 0 auto 2px;  /*<-- remove 2px from here */
    max-width: 1030px;
    overflow: hidden;
    position: relative;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    width: 100%;
}

这将使过渡工作顺利进行。 Fiddle example