javascript - I am having trouble making a looping "cloud" image resize when clicked on -
so here code,the cloud moving right left , make resize when clicked on if knows how change color of cloud when hovered on pretty nice!
<!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> </html> here code tried using when resizing cloud. $("#clouds").click(function() { $("size").animate({"height" : "350"}, 500); }); #clouds { position:absolute; z-index:500; right:0px; top:10px; }
$("#clouds").click(function(){ $("#clouds").css({"height" : "350", "background-color" : "red"}); }); i can't see css assuming #clouds cloud 1 way change height , color of cloud.
also seems trying apply height change on course of 0.5 seconds? if that's case can adding 1 css property.
$("#clouds").click(function(){ $("#clouds").css({"height" : "350", "background-color" : "red", "transition" : "height 0.5s"}); }); 
Comments
Post a Comment