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

jquery的

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窗口栏，以便获得完整的图片视图。

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

悬停图像在FF Chrome中抖动但在IE10中没有

1 个答案: