javascript - CSS/Javascript 图片转场

Question

我有一张小照片，在画廊里。如果单击它，它应该会以大字体显示在下方。

<a class="lilPic1Link" >
    <img src="resources/littleFlyingDoggScreen1.png" alt="Willkommen-Screen" width="52" height="93" id="lilPic1" onClick="makePicBig('resources/flyingDoggScreen1.PNG')">
</a>

以下:大图:

<img id="bigPic" alt="game-picture" width="1" height="1" >

那个的 Javascript 函数:

function onLoadFunction() {
    document.getElementById("bigPic").style.visibility = "hidden";                
}

function makePicBig(sourceString) {
    document.getElementById("bigPic").style.visibility = "visible";
    document.getElementById("bigPic").src = sourceString;
}

第一个函数使图片在开始时不可见，第二个函数将 bigPic 的源设置为所需的 sourche。

现在我不希望图片直接出现，但希望它从 1px * 1px 平滑到 320px * 586px。在 CSS 中，我会像这样进行过渡:

#bigPic{
    transition: width 3s, height 3s;
}
#bigPic:hover{
    width: 320px;
    height: 586px;
}

但我不想再次将鼠标悬停在图片上。如果你点击那个小的，bigPic 应该像我说的那样平滑。有什么办法吗？三张照片是小的。 bigPic 应该出现在它们下面。

Answer 1

使用 JQUERY

function makePicBig(sourceString){
    document.getElementById("bigPic").style.visibility = "visible";
    document.getElementById("bigPic").src = sourceString;
    $("#bigPic").animate({width:320, height: 586}, 3000);
}

CSS

#bigPic{
    width: 0;
    height: 0;
}