javascript - 一次滑动2个div？

Question

我正在尝试div一次滑动 2 秒。

我有一个button经常div显示在div. 而且我还有一个隐藏的 div，onClick它button显示隐藏的 div。我已将幻灯片效果设置为隐藏div，因此它会onClick从button. 然而，hidden div将滑出但button跳到它的位置。

所以基本上我如何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（请注意，我已经删除了 onclick 属性，因为它们是在 JS 端处理的）：

<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);
  }

尝试删除任何未使用的代码。