1

我正在尝试使图像动画并使其更大。我已经让它改变大小，但我现在正在努力做到这一点，所以周围的元素也不会被移动。我正在使用 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");
            }
        });
    });
});
4

2 回答 2

1

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

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

$('img').animate({
    width: 200,
    height: 150,
    top: 0,
    marginTop: '75px', // heigth / 2
    marginLeft: '100px' // width / 2
});
于 2012-04-23T23:36:13.760 回答
1

试试 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*/
}

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

于 2012-04-24T00:18:47.553 回答