Question

我试图在鼠标悬停时左右两侧动画图像，鼠标输出时会恢复到之前的状态。

例如，如果图像的原始宽度是120像素，那么在页面加载时它将显示100像素，并且在鼠标悬停时它将向左和向右扩展。因此它将向左10px以及向右10px。< / p>

<img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" />

演示 http://jsfiddle.net/squidraj/9FtBY/5/

但现在它只在右侧扩展。请任何建议都很棒。

刚刚发现css3中有一些名为clip的东西？

Answer 1

好吧，基本上你的代码是正确的。动画看起来会向右扩展，因为图像左对齐。

如果你将它包裹在一个div中并让它居中对齐，它看起来会很“好”。

<div class="wrapper"><img src="http://st.depositphotos.com/1742172/2000/v/110/depositphotos_20007761-Old-scroll-banner-cartoon.jpg" id="expandimg" /></div>

http://jsfiddle.net/GVdmF/

引号中的“好”，因为图像被拉伸。你最好选择使用背景图像的解决方案。如果你坚持一秒，我可能会看到我能做什么。

编辑：我们再来一次：http://jsfiddle.net/GVdmF/2/

我将你的照片拆分为3部分：left.png，center.png和right.png。
我将center.png添加到了div
我添加了伪类：before和：after，使它们成为块元素并添加了height / widht以及相应的background-images left.png和right.png

你的JS几乎保持不变。希望这有帮助。

Answer 2

我会使用相对于父容器的绝对定位与max-width和max-height结合使用，并在悬停时将它们重置为none：

.img:hover img {
    position: absolute;
    max-width: none;
    max-height: none;
    left: -25%;
    top: -25%;
}

http://jsfiddle.net/xv9dh/

UPD。没有看到你的演示，所以我的回答可能不相关。

Answer 3

可以用纯CSS完成，有两种方式（至少！）：

http://jsfiddle.net/9FtBY/10/

#expandimg {
    height: 100px;
    width: 100px;
    margin-left: 10px;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transition: 0.3s;
}

#expandimg:hover {
    width: 120px;
    margin-left: 0px;    
}

或第二个，position: absolute;

http://jsfiddle.net/9FtBY/7/

#expandimg {
    height: 100px;
    width: 100px;
    left: 10px;
    position: absolute;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    -moz-transition: 0.3s;
}

#expandimg:hover {
    width: 120px;
    left: 0px;    
}

Answer 4

它是一个简单的animation概念，

如果要通过递增animate来width元素，则需要将其显示为拉伸效果。只是使用这个，

Left = Left - (incrementedWidth/2)

要还原它，

Left = Left + (incrementedWidth/2)

<强> CODE：

$(document).ready(function () {
    $("#expandimg").mouseover(function () {
        $(this).stop().animate({
            //Decrement Left in pixel = 20/2 [20 increment in width]
            left: "-=10", 
            width: '120px'
        }, "fast"); 
    });
    $("#expandimg").mouseout(function () {
        $(this).stop().animate({
            //Increment Left in pixel = 20/2 [20 decrement in width]
            width: '100px',
            left: "+=10"
        }, "fast"); 
    });
});

[注意：如果您使用的是left属性，那么您必须设置absolute之类的位置才能访问它。]

鼠标悬停时向左和向右扩展图像

4 个答案:

DEMO