jquery: 幻灯片二 div 缩放 in/out 效果

Question

我有两个 < 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 向右滑出，但在滑出之前稍微滑出然后滑出。

可能是因为宽度增加了。

我该如何纠正。我可以在增加宽度之前添加时间或 delay 来更正它吗？

Answer 1

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

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

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

jquery: 幻灯片二 div 缩放 in/out 效果

jquery: slide two div with zoom in/out effect

html

javascript

css

jquery

slide