CSS / Javascript图片转换

Question

我有一张小图片，位于一个图库中。如果你点击它，它应该显示在big下面。

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

以下：bigPic：

<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;
}

第一个函数使得pic在开始时不可见，第二个函数将bigPic的源设置为sourche，这是想要的。

现在我不想让这张照片出现，但希望它从1px * 1px到320px * 586px平滑。 在CSS中，我只会进行如下转换：

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

但我不想再次盘旋在画面上。如果你点击那个小的那个，bigPic应该像我说的那样平滑。有没有办法做到这一点？ 三张照片是小照片。 bigPic应该出现在它们下面。

Answer 1

删除此功能：

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

将makePicBig()更改为：

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

并添加一些css：

#bigPic{
    visibility: hidden;
    width: 1px;
    height: 1px;
    transition: width 3s, height 3s;
}
#bigPic.visible{
    visibility: visible;
    width: 320px;
    height: 586px;
}

Answer 2

使用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;
}