So I’m trying out the jQuery animation effect through editing the margins to move. The problem is that the when I’m using the animation effect, it’s in a div that holds most of my content on the page. The margin I’m editing ends up being relative to the actual page, and not the div it’s in. Here is an example:
<html>
<head>
<script src="javascript/jQuery-1.7.1.min.js" type="text/javascript"></script>
<style type="text/css">
#maincontent{
padding-bottom: 3em;
width: auto;
background:#fff;
text-align: left;
margin-left: 10%;
margin-right: 10%;
margin-top: 60px;
}
#animateBox
{
height: 100px;
width: 100px;
background: red;
position: absolute;
}
#moveLeft
{
display: none;
}
#moveRight
{
display: inline;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#moveRight').click(function() {
$("#animateBox").animate(
{"left": "+=200px"},"normal");
$('#moveRight').css('display', 'none');
$('#moveLeft').css('display', 'inline');
});
$("#moveLeft").click(function() {
$("#animateBox").animate(
{"left": "-=200px"},
"normal");
$('#moveLeft').css('display', 'none');
$('#moveRight').css('display', 'inline');
});
});
</script>
</head>
<body>
<div id="maincontent">
<div id="animateBox"></div>
<br />
<br />
<br />
<br />
<br />
<input type="button" id="moveRight" Value="Move Right" style="width: 100px">
<input type="button" id="moveLeft" Value="Move Left" style="width: 100px">
</div>
</body>
Is there any way to fix this? Thanks.
Set .maincontent to position:relative in css.