Jquery dynamic image size change
Question
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>
2 answers
solution1
2 2017-03-27 12:40:05
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>
solution2
1 2017-03-27 12:54:08
$(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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Image Preview with jQuery, change the Hover image size
change image size(width) by jquery or css
On the fly image size change in JS/Jquery
change multiple image size using jquery
How to change the size of an image and download it with jquery?
using jquery and javascript to change the size of an image
else not change and read with image size upload jQuery
change media refresh image size with jquery
Jquery dynamic image change from selection
How to change image size and change next/prev image using Jquery?
Related Tags