Jquery 如何使绿色框仅滑动90%_Jquery_Html

Jquery 如何使绿色框仅滑动90%

jquery html

Jquery 如何使绿色框仅滑动90%,jquery,html,Jquery,Html,我希望绿色框（#box3）只向右移动90%。长方体直接位于主体元素内部 <div id='box1'> <div id='box2'> </div> <div id='box3'> </div> </div> 您可以改用jquery动画： // define left position, I used defined 80% <div id='box3' style="left:80%

我希望绿色框（

#box3

）只向右移动90%。长方体直接位于主体元素内部

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

您可以改用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;
}

//定义左位置，我使用定义的80%
$（“#box1”）。单击（函数（）{
$（'#box3'）。动画（{left:'90%}，“fast”，“swing”）；
} );
//这是3号包厢
#框3
{
位置：相对位置；
背景颜色：绿色；
高度：600px；
宽度：300px；
浮动：左；
}

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


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“div”）.animate（{left:“90%”，}，“slow”）；
});
});
`
//点击按钮
方框3

这可能会帮助你解决我发现的问题。动画是它不会将包含的div与输入错误的容器div一起使用

#box3

来代替它。我一直看到每个人都在使用。动画，但问题是如果我在gren框中扔几个框，当调用动画时这些框将保留下来不使用容器元素设置动画。是否有一种方法可以将所有包含的元素都包含在其中，使其看起来与使用切换时相同，但仍然只占90%？

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

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

<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>