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

Post a Comment