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

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -