Question

所以我正在尝试通过编辑边距来移动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>

有什么方法可以解决这个问题吗？感谢。

Answer 1

将.maincontent设置为位置：相对于css。

#maincontent{
padding-bottom: 3em;
width: auto;
background:#fff;
text-align: left;
margin-left: 10%;
margin-right: 10%;
margin-top: 60px;
position:relative /*Add this*/
}

相对于当前Div的保证金

1 个答案: