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

代わりにこれを試してください：

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

Answer 2

この種の問題にjquery UIを使用するのは、私にとってやり過ぎです...
まあ、私たちはすでにここにいるので、toggleClass()代わりに使用することをお勧めします...

このデモのように

cssを追加する

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

jQueryコードを次のように変更します

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