JQuery幻灯片效果和浮动元素

那就是：滑动的div和滑动的div之后的滑动div和side div.我用这个代码：

<div id="container">
<div id="side" style="float:right;" onclick="$('#slidable').toggle('slide');">…</div>
<div id="slidable" style="float:right;">…</div>
</div>

我的问题是,当可滑动的div完成滑动时,侧面div才开始移动.如何让两个div同时动画？

你可以在这里看到完整的例子：http://jsfiddle.net/azmeuk/QgD5Y/7/

HTML

<div id="container">
        <div id="slidable"class="hide">Foobar</div>
        <div id="side">+</div>
    </div>

我已经为div添加了一个类’hide’,id =“slipidable”只是为了在页面加载时隐藏它.如果您不想要它,您可以删除.

CSS(只有更改是我添加了隐藏类)

#side{
    float:right;
    width:50px;
    height:50px;
    background:#BBB;
}

.hide{
    display:none;
}

#slidable{
    float:right;
    height:50px;
    background:#888;
    width:200px;
}

JQuery的

jQuery(document).ready(function($) {
    $( "#side" ).click(function() {
     $('#slidable').animate({width: 'toggle'});
      });
  })

JSFiddle Demo