JQuery 幻灯片效果和 float 元素

Question

我想做一些你可以在这张图片上看到的事情:

即:一个可滑动的 div 和可滑动的 div 后面的侧边 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/

Answer 1

看看这段代码

HTML

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

我在 div 中添加了一个 class 'hide' ，其中 id="slidable" 只是为了隐藏当页面加载时。如果您不想要它，可以删除。

CSS(唯一的变化是我添加了 hide 类)

#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