Menu
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/FSMMA/
<!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>
201
Why don't you prefer .animate()
$(document).ready(function(){
$('.container').click(function(){
$('.boxes').animate({"left": "-=100px"}, "slow");
});
});
And add this
.boxes{
width:400px;
position:absolute;
}
.one,.two,.three{
display:inline-block;
position:relative;
float:left;
}
130
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
