2

我在悬停时扩展图像的两侧。它在 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 窗口栏，以便获得完整的图像视图。

4

1 回答 1

2

删除以下 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%;
}

这将使过渡工作顺利进行。 小提琴示例

于 2013-07-12T14:32:47.387 回答