javascript - 在页面加载时将图像从大调整为小

Question

我有一张图片，我想以 200px 的速度短暂加载 200px，然后在页面加载时平滑地缩放到 50px。我用显示/隐藏技术完成了它，显示更大 > 然后隐藏 > 显示更小并带有淡入淡出；但我需要过渡。

到目前为止。但是结果很丑 -

var bigSrc = "averycoolimage.jpg";

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

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

$(function() {
    $("#divId").append(img);

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

Answer 1

使用 CSS3 过渡代替 CSS3 或 JS 动画对问题的看法略有不同。

HTML

<img src="http://img1.wikia.nocookie.net/__cb20120923041524/kongregate/images/0/03/Awesome_face.png" />

CSS

img {
    -webkit-transition:all .5s;
    transition:all .5s;
    width:200px;
    height:200px;
}
img.small {
    height:50px;
    width:100px;
}

Javascript

$( document ).ready(function() {
    $('img').addClass('small');
});

Fiddle Example