因此，我正在通过编辑要移动的边距来尝试 jQuery 动画效果。问题是，当我使用动画效果时，它位于一个包含页面上大部分内容的 div 中。我正在编辑的边距最终是相对于实际页面的，而不是它所在的 div。这是一个示例:
<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>
有什么办法可以解决这个问题吗？谢谢。
最佳答案
在 css 中将 .maincontent 设置为 position:relative。
#maincontent{
padding-bottom: 3em;
width: auto;
background:#fff;
text-align: left;
margin-left: 10%;
margin-right: 10%;
margin-top: 60px;
position:relative /*Add this*/
}
关于javascript - 相对于当前 Div 的边距，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9451221/