JQuery幻灯片效果和浮动元素

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>

我已将class'隐藏'添加到div 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

Answer 2

在这里试试这个：

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

Answer 3

使用jquery UI来解决这类问题对我来说太过分了...... 嗯，我们已经在这里了，我建议您使用toggleClass()而不是......

像这样demo

添加一些css

#slidable.open {
    margin-right: -200px
}

并将您的jQuery代码更改为

jQuery(document).ready(function($) {
    $( "#side" ).click(function() {
      $( "#slidable" ).toggleClass( "open", 500 );
      });
  });