如何通過javascript增加和減少圖像寬度的時間？

Question

我用下面的JavaScript代碼，但它無法正常工作就像跳動的心臟： -

<script>   
    var y = document.getElementById("p2"); 
    var x = document.getElementById('myImg'); 
    setInterval(function(){ 
       x.height = "110"; 
       x.width="120"; 
       setInterval(function(){ 
          x.height = "98"; 
          x.width="107"; 
          },3000); 
       },2000); 
</script> 

Answer 1

不是那麼清楚你想要達到的目標，但是...如果你想交替剛剛從一個尺寸到另一個，比下面的例子可以幫助你：

var y = document.getElementById("p2"); 
 
var x = document.getElementById('myImg'); 
 

 
var state = true; 
 

 
var timerId; // do window.clearTimeout(timerId) to stop de alternation 
 

 
function alternate(){ 
 
    x.height = state ? 110 : 98; 
 
    x.width= state ? 120 : 107; 
 
    state = !state; 
 
    timerId = window.setTimeout(alternate, 1000); 
 
} 
 

 
alternate();

<p id="p2"></p> 
 
<img id="myImg" src="https://placeholdit.imgix.net/~text?txtsize=19&txt=200%C3%97200&w=200&h=200" />

Answer 2

使用竇和動畫循環。按照您設定的時間間隔啓動循環。只需確保動畫循環在重新啓動之前有時間完成。您可以不使用此處的變換，而是使用CSS寬度和高度。

var img = document.querySelector("img"), 
 
    style = img.style;         // use styles 
 

 
setInterval(animateHeart, 1100);      // interval to animate 
 

 
function animateHeart() { 
 

 
    var time = 0,           // time for sine function 
 
     rate = 0.2,          // speed of sine function 
 
     radius = 0.5;          // added to 100% of its scale 
 
    
 
    (function loop() {         // inner loop 
 
    var scale = 1 + Math.abs(Math.sin(time) * radius); // calc scale 
 
    time += rate; 
 
    if (time >= Math.PI*2) { 
 
     style.transform =         // reset scale 
 
     style.webkitTransform = "scale(1,1)"; 
 
     return 
 
    } 
 

 
    // set CSS transform to scale smoothly (alt. use width/height) 
 
    style.transform = 
 
     style.webkitTransform = "scale(" + scale + "," + scale + ")"; 
 

 
    requestAnimationFrame(loop);      // loop animation 
 
    })(); 
 
}

<img src="http://i.stack.imgur.com/gcAtB.png">