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 Ranish Malhan
Ranish Malhan
Courses Plus Student 37 Points

How to repeat the unordered list using jquery?

How to repeat the unordered list using jquery? I tried but nothing happened. Pls check the code and help me out.

<!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script> $(document).ready(function(){ var animTime = 1000; var awidth = 220; var pause = 2000;

$('ul').append( $('ul'));
$('ul').prepend($('ul'));  

var loop = function (){anim()};

var anim = function(){$("ul").animate({left: '-=' + awidth},animTime,loop).delay(pause);};

anim();

var stopAnim = function(){$("ul").mouseenter($("ul").stop(anim));};
var resume = function(){$("ul").mouseleave(anim);};

$("ul").hover(stopAnim,resume);

}); </script> </head> <body> <section style="max-width:500px;overflow:hidden;background:c6c6c6;"> <ul style="width:99999px;position:absolute;list-style:none;"> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:red;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> <li class="list" style="width:200px;height:200px;float:left;margin-right:10px;margin-left:10px;background:green;"></li> </ul> </section>

</body> </html>

Ira Bradley
Ira Bradley
12,976 Points

You can improve the readability of your code by typing:

```javascript

YOUR CODE HERE

followed by three more back ticks like this:

$(document).ready(function(){ var animTime = 1000; var awidth = 220; var pause = 2000;

$('ul').append( $('ul'));
$('ul').prepend($('ul'));  

var loop = function (){anim()};

var anim = function(){$("ul").animate({left: '-=' + awidth},animTime,loop).delay(pause);};
anim();

var stopAnim = function(){$("ul").mouseenter($("ul").stop(anim));};
var resume = function(){$("ul").mouseleave(anim);};

$("ul").hover(stopAnim,resume);   
});