基本jQuery：单击一个按钮将文本面板滑出屏幕，单击另一个按钮将其滑回屏幕

我正在维护一个有全屏背景照片的网站，照片上方有一个文本面板

以下是我要添加的功能：

单击“隐藏文本”按钮使文本面板在屏幕左侧设置动画，以便访问者可以看到整个背景照片。单击“隐藏文本”按钮后，应该会淡出，而另一个按钮“显示文本”会在不同的位置淡入。当点击“显示文本”按钮时，文本面板应该从屏幕外的左侧回到正确的位置。同时，“显示文本”按钮应淡出，“隐藏文本”按钮应淡入

换言之：

单击#hideText时

aimate#主面板离开屏幕，淡出#隐藏文本，淡入#显示文本

单击#showText时

将“主面板”从屏幕左侧的当前位置设置为在屏幕上的适当位置，然后淡出“showText”，淡入“hideText”

有人能告诉我如何使用jQuery吗？我将非常感谢实际的代码

检查此处的幻灯片效果和实现。

和html（仅作为示例）

主面板

如果您不喜欢宽度效果，可以很容易地修改它，以便滑出屏幕左侧，如下所示

---

ps：对于右键上的按钮，单击按钮，而不是JSFIDLE的span上的“Result”（结果）

谢谢你，LinuxEasy–你给我看的演示很有趣，但它不是我想要的。我想我是笨拙地用语言解释的。我刚刚编辑了一下这个问题，你能看一下吗？你可以查看给定链接提供的源代码。它展示了它是如何实现的。因此，您想要放置的代码已经存在，并且可以通过检查其他动画来检查其他选项。链接上显示的效果只在点击按钮时起作用。好吧，你要求做很多事情——基本上是做所有的事情。你可以在谷歌上找到很多教程。我们可以帮助你解决问题，但显然不能为你做这项工作。检查这些：-…高兴-非常感谢，这太棒了除了我在JSFIDLE中看到的情况似乎是相反的：单击“隐藏文本”按钮时，会出现一个文本面板，“显示文本”淡入淡出。单击“显示文本”没有结果。。。我可以请你更新你的答案吗？我将不胜感激。@DimitriVorontzov

单击“显示文本”没有结果。

它可以工作，JSFIDLE上有一个半透明的div，上面有“result”一词。它在按钮上方，单击按钮，而不是div。我现在明白了！但是–“隐藏文本”按钮不会隐藏文本，而是显示文本。反之亦然。我该如何扭转这种局面？：-）完美的非常感谢你，干杯@迪米特里沃龙佐夫：这不仅仅是一种修辞手段——我也在纽约。因此，如果您对jQuery（js以及其他内容）还有任何疑问，请随时提问。

$('#hideText').click(function(){
    $('#mainPanel').animate({width:'toggle'},1000);
    $(this).fadeOut();
    $('#showText').fadeIn();
});
$('#showText').click(function(){
    $('#mainPanel').animate({width:'toggle'},1000);
    $(this).fadeOut();
    $('#hideText').fadeIn();
});
​

<div id='mainPanel' 
      style='position:absolute; left: 0px; top: 50px; 
            border: 1px solid black; white-space: nowrap'>Main Panel</div>
<input type='button' id='hideText' value='Hide Text'
       style='position:absolute;left:0px'>
<input type='button' id='showText' value='Show Text' 
       style='display:none; position:absolute;right:0px;'>