答案1

Question

我目前正在一个网站上工作，我希望当用户将鼠标悬停在图像上时，图像的高度和宽度会增加。

这是我http://jsfiddle.net/amoeba/KdwwL/的代码，用于显示所需的输出。

HTML：

<img id="img-shadow" align="center" src="https://i2.sndcdn.com/artworks-000049446949-mwzm8s-t500x500.jpg?9d68d37" />

CSS：

#img-shadow {
    height:550px;
    width:550px;
    left:50px;
    top:50px;
    position:absolute;
    margin-left:auto;
    margin-right:auto;
    box-shadow:1px 1px 10px black;
}

jQuery的：

$(document).ready(function() {
    $('#img-shadow').hover(function() {
        $(this).stop().animate({
            'width: '565px',
            'height' : '565px',
            'left' : '45px',
            'top' : '45px'
        }, 300);
    }, function() {
        $(this).stop().animate({
            'width' : '550px',
            'height' : '550px',
            'left' : '50px',
            'top' : '50px'
        }, 360);
    });
});

这是我想要的确切效果，但问题是当我将鼠标悬停在图片上时，会影响其余的网页内容，例如：http://jsfiddle.net/amoeba/Vwxev/

如果不在动画图像下方移动内容，我怎么能获得相同的效果？

**注意：在第二个示例中，我删除了position:absolute属性。在我的网页上，如果我有text-align:center，它似乎会向外扩展。我删除了text-align:center属性，因为jsfiddle不会为我中心，我只想展示当我不想要它时它如何向内移动内容。

Answer 1

答案1

这是使用绝对定位属性。

我几乎可以肯定这就是你想要的。在这个jsfiddle中，我添加了绝对位置属性，以便文本不会移动。如果您希望在动画生效时图像位于顶部，则可以编辑z-index。

我将您的图片包装在＃imddiv中，将您的文字包装在#otherdiv中并应用此css：

#imgdiv {
 position: absolute;
 top: 0;
 left: 0;
}

#otherdiv {
 position: absolute;
 top: 550px;
 left: 0;
}

答案2

这使用与图像大小差异大小相同的负边距效果。

这里我只是将这些代码行添加到悬停并分别悬停在函数中。

悬停在：

$('#text').stop().animate({
    'margin-top': '-15px'
}, 300);

将鼠标悬停：

 $('#text').stop().animate({
    'margin-top': '0px'
}, 360);

我差点忘了新的jsfiddle。

Answer 2

这可能不起作用，我无法测试它，因为我的电脑出于某种原因讨厌jQuery，但尝试使用它：

$(document).ready(function() {
    $('#img-shadow').hover(function() {
        $('#img-shadow').stop().animate({
            'width: '565px',
            'height' : '565px',
            'left' : '45px',
            'top' : '45px'
        }, 300);
    }, function() {
        $('#img-shadow').stop().animate({
            'width' : '550px',
            'height' : '550px',
            'left' : '50px',
            'top' : '50px'
        }, 360);
    });
});

很抱歉，如果这不起作用。

防止jQuery动画移动其余的页面内容

2 个答案:

答案1

答案2