Jquery dynamic image size change

问题

I have create a logic to auto increment image height and width by using for loop in jquery but my image zoomed suddenlly ,not according to loop .Please help me to resolve my query .

Query is :- image size should be increase in four times according to loop

Thanks all

$(function() {
        var plus = 50 ;
        var max = 4;
      
      setTimeout(function(){ 
        for(var i = 0; i < max; i++) {
        
        
        var height = 50;
        var width = 50;
        
        var  height = height + plus;
        var width = width + plus;

        plus +=  plus; 
        
        $("#image").width(width).height(height);
      }


    }, 2000);
       
       
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
    <div>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnk1kzJCdN3FFDcjMIBSNc2YuBdCuc6A5Cpzg4LIDkMB15-mek" id="image"/>
    </div>

</body>

回答1:

You would need to use setInterval() and clearInterval().

Check below example.

$(function() {
  var plus = 50;
  var max = 4;

  var timer = setInterval(function() {
    var height = 50;
    var width = 50;

    height = height + plus;
    width = width + plus;

    plus += plus;

    $("#image").width(width).height(height);

    if (plus >= 800)
      clearInterval(timer);

  }, 2000);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<body>
  <div>
    <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnk1kzJCdN3FFDcjMIBSNc2YuBdCuc6A5Cpzg4LIDkMB15-mek" id="image" />
  </div>

</body>

回答2:

$(function() {
        var plus = 2 ;
        var max = 4;
      
   setInterval(function () {
        for(var i = 0; i < max; i++) {
        
           
        
        var height = 2;
        var width = 2;
        
        var  height = height + plus;
        var width = width + plus;

        plus +=  plus; 
        
        $("#image").width(width).height(height);
        
      }
}, 2000); 
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<body>
    <div>
        <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQnk1kzJCdN3FFDcjMIBSNc2YuBdCuc6A5Cpzg4LIDkMB15-mek" id="image" height="2%" width="2%"/>
    </div>

</body>

I use setInterval function and set it outside loop

来源：https://stackoverflow.com/questions/43046418/jquery-dynamic-image-size-change

标签

javascript

jquery

html