Question

我想使用jQuery将图像从200 x 300px动画化为原始大小。

我有这张照片：

var imgHtml = "<img id='bigImg' src='" + bigSrc + "' alt='' style=\"height:200px; width:300px\"/>";
$("#divId").html(imgHtml);

这个jQuery代码：

$("#bigImg").animate({
    height: "400px",
    width: "600px",
},500);

效果很好，但实际上我必须对未来的大小进行硬编码。我想动画原始大小。

我该怎么做？

Answer 1

尝试这样做

<强> HTML

<div id="divId">Loading</div>
<input id="submit" type="button" value=" Click Me " />

<强>的JavaScript

var bigSrc = "Image Source";

var img = new Image(),
    oWidth, oHeight;

img.onload = function() {
    oWidth = this.width;
    oHeight = this.height;
    this.width = 300;
    this.height = 200;
    this.id = "bigImg";
}
img.src = bigSrc;

$("#submit").click(function(e) {
    $("#divId").append(img);
    $("#bigImg").animate({
        height: oHeight,
        width: oWidth,
    }, 500);
});

Check this demo jsFiddle

你可以调整以适合你。希望这会对你有所帮助。

Answer 2

好的，我明白你的意思了。

$("#bigImg").width()将返回px中的宽度，而height将执行类似的操作。您还可以使用.outerWidth()和.innerWidth()分别包含填充/边框或填充。

从代码中，您已使用内联样式更改了图像的原始尺寸。相反，保存图像尺寸，在jQuery中将图像更改为200 x 300px，执行您想要的操作，然后将其更改回原始尺寸：

var originalWidth = $("#bigImg").width();
var originalHeight = $("#bigImg").height();

$("#bigImg").css({
    width: '200px',
    height: '300px'
});

//Do whatever you meant to do here, the when you're finished...

$("#bigImg").animate({
    width: originalWidth,
    height: originalHeight,
},500);

jQuery文档： http://api.jquery.com/animate/或http://api.jquery.com/category/dimensions/

使用jQuery Animation将图像调整为原始尺寸

2 个答案: