Question

我希望绿框（#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;
}

Answer 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;
}

Answer 2

使用按钮，点击它，它将在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>

如何让绿色盒子只滑90％

2 个答案: