Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Alex Flores
Alex Flores
7,864 Points

JavaScript (jQuery) simple cloud (left to right) loop. Help please

This seems like a simple enough task and I have it working, except one issue - I know there has to be a better way, because I hear my computer kicking into overdrive when I run it and I think I know why.

I have a cloud that's an infinite loop, going left to right. However, when it completes one loop, I want it to start off screen so it looks natural. To do that I added a margin-left:-200px;. So when the script runs, the horizontal scroll bar gets bigger and allows me to scroll to the left, so I fixed this by hiding the overflow. This worked, but there has to be a better way, because I would like to have the scroll bars and I still hear my computer going into overdrive.

Any help on this would be truly appreciated. I've looked everywhere online and most places suggest I use CSS, but CSS isn't working for me. I think I might be able to fix it if I can add positiion as absolute, but then the clouds do this weird back to the future warp-drive into the top right corner of the screen... I don't know where to begin with that one.

Here is my code:

HTML

<!DOCTYPE html>
    <div class="stars"></div>
    <div class="twinkling"></div>
    <div id="clouds">
        <img id="cloud-img" src="assets/img/clouds3.png">
    </div>
</html>

CSS

<style>
#clouds {
position:relative;
z-index:500;
}

#cloud-img {
    width: 25%;
    height: 100%;
    margin-left: -30%;
    /* background-image: transparent url(img/clouds3.png) repeat top center; */
    margin-top: 5%;
    z-index: -100;
}
</style>

JS (jQuery)

<script>
$(document).ready(function() {

    function repeat() {
      $("#clouds").css({"left":0}).show();
      $("#clouds").animate({left:'+=130%'},20000);
      $('#clouds').delay(500).fadeOut(500,repeat);
    }

    repeat(); 
 });

</script>

Another question I have, which I just noticed, the nav bar doesn't allow me to click on it, until the cloud moves by it? Why would this be?

Karen Freeman-Smith
Karen Freeman-Smith
29,248 Points

A timer might help... Google "SetInterval" to learn more about timers in JavaScript.

1 Answer

Alex Flores
Alex Flores
7,864 Points
Alex Flores
Alex Flores
7,864 Points

Thanks I tried, but it doesn't work well.