javascript - 一度に 2 つの div をスライドしますか?

Question

一度に2秒滑ろうとしてdivいます。

の横に常に表示されるbutton内に があります。また、非表示のdivがあり、非表示のdivが表示されます。非表示にスライド効果を設定して、からスライドします。ただし、スライドアウトしますが、その位置にジャンプします。divdivonClickbuttondivonClickbuttonhidden divbutton

基本的に、このbuttonスライドを同時に作成するにはどうすればよいhidden divですか？

ここはjQuery

$(function() {
    $('#leftmenu').hide();
});
function showLeftMenu()
{
    $('#leftmenu').show("slide",1000);

}
function hideLeftMenu()
{
    $('#leftmenu').hide("slide",1000);
}

ここに私のHTMLコードがあります

<div id='leftmenu' class='leftmenustyle'>

    This is my div

    <input type='button' name='Menuhide' onClick='hideLeftMenu();'>
</div>    

<div id='leftbutton'>
    <input type='button' name='menushow' onClick='showLeftMenu();'>
</div>

誰でもこれで私を助けることができますか?

Answer 1

何を達成しようとしているのか正確にはわかりませんが、通常の状況では、これが探している解決策になります。

HTML (JS 側で処理されているため、onclick 属性を削除したことに注意してください):

<div id='leftmenu' class='leftmenustyle'>
    This is my div
    <button name='Menuhide'>Hide</button>
</div>
<div id='leftbutton'>
    <button name='menushow'>Show</button>
</div>

Javascript (jQuery / jQuery UI):

$(function () {
    $('#leftmenu').hide();

    $('button[name="Menuhide"]').on('click', function () {
        $('#leftmenu').hide("slide", 1000, function () {
            $('#leftbutton').show("slide", 1000);
        });
    });

    $('button[name="menushow"]').on('click', function () {
        $('#leftbutton').hide("slide", 1000, function () {
            $('#leftmenu').show("slide", 1000);
        });
    });
});

デモ: http://jsfiddle.net/SDtpx/1/

Answer 2

私は問題を解決することができました。これが私のコードです。

function doSlide()
  {
  //$('#content').show("bounce", 1000);
  //$('#showpanel').hide();
  $('#sidepanel').toggleClass("hidesidepanel showsidepanel", 1000);
  $('#maincontent').toggleClass("show maincontent hidemaincontent", 1000);
  $('#openmenu').toggleClass("openmenuleft openmenuright", 1000);
  }

ご覧のとおり、さまざまな場所に配置されているクラスを切り替えて、それに効果を追加しました。とにかくありがとう。

Answer 3

function doSlide()
  {
  $('#sidepanel').toggleClass("hidesidepanel showsidepanel", 1000);
  $('#maincontent').toggleClass("show maincontent hidemaincontent", 1000);
  $('#openmenu').toggleClass("openmenuleft openmenuright", 1000);
  }

使用されていないコードを削除してみてください。