JS中的图像放大缩小动画答案

【问题标题】：Image Enlarge Shrink Animation In JSJS中的图像放大缩小动画
【发布时间】：2013-05-23 13:41:15
【问题描述】：

好的，所以我正在放入一个 onclick 调整大小的图像，（变大然后 onclick 返回到原始大小）

我已经使用 JS 完成了这项工作，但我似乎无法在大小之间的补间中暗示动画，我希望它明显变大，而不是扩大到大小，而不仅仅是在两个实例之间轻弹。

代码如下：

      <script type="text/javascript">
<!--
var flag = true;
function resize() {
    if(flag) {
        document.getElementById("img1").style.width = "50px";
    } else {
        document.getElementById("img1").style.width = "280px";
    }
    (flag)?flag=false:flag=true;
} 
//-->
</script>

<body onload="resize();">
<img id="img1" src="../images/attachicona.png" border="0" onClick="resize();" />

【问题讨论】：

标签： javascript html image shrink

【解决方案1】：

您可以使用 CSS3 过渡来制作相同的效果。不需要 javascript 或 jquery - css3 animation/transition/transform: How to make image grow?

或者你可以使用 jquery 动画 - http://forum.jquery.com/topic/image-resize-animation

【讨论】：

我知道我会这样做，但它不适用于移动设备，悬停效果仍然存在。我希望能够通过单击而不是悬停来切换过渡。干杯
你可以试试jquery动画。使用起来非常简单。（见更新的答案）

【解决方案2】：

如果使用 jquery

var flag = true;
$('#img1').click(function(e){
    if(flag)
        $(e.target).animate({width:'50px'}, 150, function(){
            //do stuff after animation
        });

    else
        $(e.target).animate({width:'280px'}, 150, function(){
            //do stuff after animation
        });
    flag=!flag;
});

【讨论】：