javascript - Resize a looping cloud image while clicking on it -
here code looping cloud, animation loops right left , make cloud resize-able when clicked on not know how it...
<!doctype> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> </head> <body> <div id="clouds"> <img border="0" alt="animated clouds" src="clouds.png"> <script> $(document).ready(function() { function loop() { $('#clouds').css({right:0}); $('#clouds').animate ({right: '+=1400'}, 5000, 'linear', function() { loop(); }); } loop(); }); </script> </div> </body> </html> here tried resizing cloud:
$("#clouds").click(function() { $("size").animate({"height" : "350"}, 500); }); and css:
#clouds { position:absolute; z-index:500; right:0px; top:10px; }
in code animate divisions in such way animate left right , right left
$(document).ready(function() { function loop() { $('.bouncer').animate({'left': '500'}, { duration: 1000, complete: function() { $('.bouncer').animate({left: 0}, { duration: 1000, complete: loop}); }}); $('<div/>').text('exiting loop').appendto($('.results')); } loop(); $("#clouds").click(function() { console.log("click"); $("#clouds").animate({"height" : "350"}, 500); }); });.bouncer { position: absolute; width: 50px; height: 50px; background-color: red; } .results { float: right; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> </head> <body> <div class="bouncer"> <img id="clouds" border="0" alt="animated clouds" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:and9gcrsi7hhthppcliuglq2tvlapu5cmw5qhjovyqyughtzonqlechlgl9s-qu"> </div> </html>
Comments
Post a Comment