-2

我希望绿色框 ( #box3) 仅向右移动 90%。该框直接位于 body 元素内。

<div id='box1'>
    <div id='box2'>
    </div>
    <div id='box3'>
    </div>
</div>

$( "#box1" ).click(function() { $( "#box3" ).toggle("slide",

#box1 {
    background-color: white;
    height: 600px;
    width: 600px;
    margin: auto;
}
#box2 {
    background-color: red;
    height: 600px;
    width: 300px;
    float: left;
}
#box3 {
    background-color: green;
    height: 600px;
    width: 300px;
    float: left;
}
4

2 回答 2

1

您可以改用 jquery 动画：

// define left position, I used defined 80%
<div id='box3' style="left:80%">

<script>
      $( "#box1" ).click(function() { 
            $('#box3').animate({left:'90%'},"fast","swing");
      } );
</script>  


// this is box 3

#box3
{
    position:relative;
    background-color: green;
    height: 600px;
    width: 300px;
    float: left;
}
于 2013-08-10T06:43:58.987 回答
0

使用一个按钮，单击它，它会将框向右移动 90%（但位置应该是“绝对”）

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script> 
    $(document).ready(function(){
    $("button").click(function(){
    $("div").animate({left:"90%"}, "slow");
    });
    });
</script> 
</head>`

<body>

// click the button

<button> Box 3 </button>
<div style=background-color: "green"; height: "600px"; width: "300px"; float: "left"; position:"absolute";>
</div>

</body>
于 2013-08-10T10:25:35.870 回答