Image Enlarge Shrink Animation In JS

Question

Ok so I'm putting in an image that onclick resizes, (goes larger and then onclick returns to origional size)

I've done this using JS but I cant seem to implicate an animation in the tween between sizes, i want it to visibly get bigger rather so it expands to the size rather than just flicks between the two instances.

Heres the coding:

      <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();" />

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

You can use CSS3 transitions to make the same effect. No need of javascript or jquery - css3 animation/transition/transform: How to make image grow?

Or you can use jquery animations - http://forum.jquery.com/topic/image-resize-animation

edited May 23 '17 at 12:05

Community

1
1

answered May 28 '13 at 14:26

Mukesh Soni

6,646
3
30
37

I know i was going to do that, but it doesnt work for mobile, the hover effect stays on. I want to be able to toggle the transition with a click rather than a hover. Cheers – mrmason May 28 '13 at 14:30
You can try jquery animations. Pretty simple to use. (see updated answer) – Mukesh Soni May 28 '13 at 14:33

score 1 · Accepted Answer · answered May 28 '13 at 14:34

if using 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;
});

Image Enlarge Shrink Animation In JS

2 Answers2