Question

我正在尝试制作一个动画图像并使其更大。我已经让它改变了尺寸，但我现在正试图这样做，所以没有任何周围的元素也不会被移动。我正在使用jQuery来制作动画，并且出于某种原因它不会增加边距的每一步。它只在它完成后才会这样做。我以为我正确阅读了jQuery文档。到目前为止，这是我的代码：

$(document).ready(function(){
    $(".image").mouseenter(function(){
        $(this).animate({height: "176px", width: "250px"},
            {
            step: function(now, fx) {
                $(this).css("margin-left","-=0.076");
                $(this).css("margin-right","-=0.084");
                $(this).css("margin-bottom","-=0.152");
            }
        });
    });
    $(".image").mouseleave(function(){
        $(this).animate({height: "100px", width: "174px"},
            {
            step: function(now, fx) {
                $(this).css("margin-left","+=0.076");
                $(this).css("margin-right","+=0.084");
                $(this).css("margin-bottom","+=0.152");
            }
        });
    });
});

Answer 1

没有你的HTML，很难说，但我认为你正在努力做到这一点。我建议你尽可能用css和html做，然后担心javascript。如果您创建一个与图像大小相同的容器，那么您可以使用常用方法将图片置于容器中心，以便在css中居中，但您可以为其设置动画。我也会创建一个函数来处理这些动画，因此它更容易使用。

在这里查看简单的演示：jsfiddle（包括可爱的小猫）

$('img').animate({
    width: 200,
    height: 150,
    top: 0,
    marginTop: '75px', // heigth / 2
    marginLeft: '100px' // width / 2
});

Answer 2

尝试CSS3动画：

img{
-webkit-transform:scale(0.6); /*Webkit: Scale down image to 0.6x original size*/
-moz-transform:scale(0.6); /*Mozilla scale version*/
-o-transform:scale(0.6); /*Opera scale version*/
-webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/
-moz-transition-duration: 0.5s; /*Mozilla duration version*/
-o-transition-duration: 0.5s; /*Opera duration version*/
}

.hovergallery img:hover{
-webkit-transform:scale(0.9); /*Webkit: Scale up image to most of the original size*/
-moz-transform:scale(0.9); /*Mozilla scale version*/
-o-transform:scale(0.9); /*Opera scale version*/
}

以上将在悬停时缩放图像。

Javascript动画图像调整大小

2 个答案: