Question

我创建了一个逻辑，通过在jquery中使用for循环来自动增加图像的高度和宽度，但我的图像突然缩放，而不是循环。请帮我解决我的问题。

查询是： - 图像大小应根据循环增加四次

全部谢谢

＆＃13;

$(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);
       
       
      });

＆＃13;

<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>

＆＃13;

Answer 1

您需要使用setInterval()和clearInterval()。

检查以下示例。

＆＃13;

$(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);

});

＆＃13;

<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>

＆＃13;

Answer 2

＆＃13;

$(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); 
      });

＆＃13;

<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>

＆＃13;

我使用setInterval函数并将其设置在循环

之外

Jquery动态图像大小的变化

2 个答案: