Erstellen eines expandierenden Bildes beim Klicken mit setInterval & clearInterval?

Question

Ich versuche ein Miniaturbild zu erstellen, das zu einer größeren Version animiert und für 5 Sekunden als diese Version verbleibt, bevor es auf die ursprüngliche Größe zurückkehrt, wenn auf die Schaltfläche 'Ansicht' geklickt wird. Ich muss unbedingt die Methoden window.setInterval und window.clearInterval verwenden.

Hier mein Versuch ist so weit: https://jsfiddle.net/Lm1y51pb/1/

var myVar = setInterval(function(){ enlargeImg() }, 5000); // expand for 5 seconds 

    function enlargeImg() { 
     var img = document.getElementById("myImg"); 
     var width = 0; 
     var height = 0; 
     // how do I expand the image with this so far? 
    } 

    function myStopFunction() { 

     if(5000 secs have passed) 
     clearInterval(myVar); 
    } 

Ich habe Probleme bei der Erweiterung um das Bild und vor allem in der myStopFunction(), wo, wenn 5 Sekunden vergangen sind, stoppen Sie die obige Funktion.

Die maximale Breite und Höhe beträgt 500px.

Answer 1

Dies sollte funktionieren:

var myVar = setInterval(function(){ enlargeImg() }, 5000); 
 

 
function enlargeImg() { 
 
    var img = document.getElementById("myImg"); 
 
    var width = 0; 
 
    var height = 0; 
 
    img.style.width = 'auto'; 
 
    img.style.height = 'auto'; 
 
}

<img id="myImg" src="http://i.imgur.com/XCCso5f.jpg" alt="" width="250" height="250" /> 
 
<button onclick="enlargeImg()">View</button>