hacker5885
New Member
Hi Im new to jquery I was hoping one of you more experienced guys could help me out. I have a container set to overflow: hidden and inside I have 3 divs and two of them are hidden because they are overflowing. I would like to make the divs all appear in order sliding from the right upon each click of the container. I have got the second div to appear on click but I cant get the third to move. each time the container is clicked the div in inside should move 100px, but it doesn't. Please explain to me why it doesn't. here is the JS fiddle link -> http://jsfiddle.net/jack2ky/HBHcC/\[code\] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script src="http://code.jquery.com/jquery-latest.js"></script><style> .container{ width:100px; height:100px; overflow:hidden; position:relative;}.one,.two,.three{ display:inline-block; position:relative;} .one{ width:100px; height:100px; background-color:green;}.two{ width:100px; height:100px; background-color:red;}.three{ width:100px; height:100px; background-color:blue;}.boxes{ width:400px;}</style></head><body><script type="text/javascript">$(document).ready(function(){ $('.container').click(function(){ $('.boxes').offset({left :-100}) }); });</script><div class="container"> <div class="boxes"> <div class="one"> </div> <div class="two"> </div> <div class="three"> </div> </div></div></body></html>\[/code\]