jquery - jQuery幻灯片效果和浮动元素

Question

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

即：可滑动的 div 和可滑动的 div 之后的侧 div。我使用这段代码：

<div id="container">
<div id="side" style="float:right;" onclick="$('#slidable').toggle('slide');">…&lt;/div>
<div id="slidable" style="float:right;">…&lt;/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>

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

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 演示

Answer 2

在这里试试这个：

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

Answer 3

在这种情况下使用 jquery UI 对我来说太过分了......
好吧，我们已经在这里了，我可以建议你toggleClass()改用......

喜欢这个演示

添加一些CSS

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

并将您的 jQuery 代码更改为

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