javascript - Hello I want to make 4 objects move left to right in a loop but my code is not working -


this html code can see

 <!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>  <div id="clouds2">  <img border="0" alt="animated clouds" src="clouds2.png" >  <script>  $(document).ready(function() {  function loop() {     $('#clouds').css({right:0});     $('#clouds').animate ({         right: '+=1400',     }, 5000, 'linear', function() {         loop();       });    }      loop();   });    </script>  </div>   </body>    </html>     #clouds { position:absolute; z-index:500; right:0px; top:10px; }   #clouds2{  position:absolute; z-index:500; right:0px; bottom:10px;     } 

and css can see dont understand whu second cloud wont move thats thing thats bugging me

it mean lot if helped me figure out lost...also tell me messed dont have change code if feel it,thank !!!

the first error gave $('#clouds') instead of $('#clouds2'), function works great, eventhough div adjusts fine, image remained still, added float:left img tag, made image move expected!

$(document).ready(function() {    function loop() {      $('#clouds2').css('right', 0);      $('#clouds2').animate({        right: '+=1400',      }, 5000, 'linear', function() {        loop();      });    }      loop();    });
#clouds {    position: absolute;    z-index: 500;    right: 0px;    top: 10px;  }    #clouds2 {    position: absolute;    z-index: 500;    left: 0px;    bottom: 10px;  }    #clouds2>img {    float: right;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div id="clouds2">    <img border="0" alt="animated clouds" src="http://lorempixel.com/400/200/">  </div>


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 -