Javascript jquery：具有放大/缩小效果的滑动双div

我有两个

leftdiv

和

rightdiv

都是50%宽度

leftdiv

向左滑动，其宽度增加，看起来像放大效果

同样的情况也发生在

rightdiv

上

这是我的密码：

css

.leftdiv {
position:fixed;
top:0;
left:0px;
width:50%;
-webkit-transition:all 2.0s ease;
-moz-transition:all 2.0s ease;
-o-transition:all 2.0s ease;
transition:all 2.0s ease;
}
.rightdiv {
position:fixed;
top:0;
right:0px;
width:50%;
-webkit-transition:all 2.0s ease;
  -moz-transition:all 2.0s ease;
  -o-transition:all 2.0s ease;
  transition:all 2.0s ease;
}

JQUERY

jQuery('.leftdiv').stop().animate({ right: '-90%' });
$('.leftdiv').css('width','80%');
jQuery('.rightdiv').stop().animate({ left: '-90%' });
$('.rightdiv').css('width','80%');

这段代码按我的要求滑出

leftdiv

到左边，滑出

rightdiv

到右边，但在滑出之前，先滑出一点，然后滑出

可能是因为宽度增加了

---

我怎样才能纠正这一点。我可以在增加宽度之前添加计时或

延迟

，以进行校正

JQuery动画属性可以在一次方法调用中彼此堆叠（用逗号分隔），如下所示：

jQuery('.leftdiv').stop().animate({ 
    left: '-90%',
    width : '80%'
});

jQuery('.rightdiv').stop().animate({ 
    right: '-90%',
    width : '80%'
});

---

我不知道您是否意识到这一点，JQuery

.animate（）

函数还接受另一个参数，即结束动画回调。是否要在完成

右侧：'-90%'

后立即增加宽度？我要在

右侧：'-90%

的同时增加宽度。这样看起来就像放大效果。我做错了吗？..好的，那么你可以像这样堆叠动画：

JQuery（'.leftdiv'）.stop（）.animate（{right:'-90%}）.animate（{width:'80%}）

。这样，它的宽度在

right:'90%'

之后增加。哦，对不起，您也可以像这样在单个动画中堆叠要设置动画的属性：

。animate（{right:'-90%'，widh:'80%}）。告诉我们它是否有效。jQuery（'.leftdiv'）.stop（）.animate（{left:'-90%，width:'80%'）；jQuery（'.rightdiv'）.stop（）.animate（{right:'-90%，width:'80%}）；