When trying out the jQuery animation effect by editing margins to move, an issue arose. The problem is that while using the animation effect within a div that contains most of the content on the page, the edited margin ends up being relative to the actual page, rather than the div itself. Here's 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>
Are there any solutions to this issue? Thank you.