基本jQuery的：按一下按钮，文本面板滑开屏幕，单击另一个按钮，将其向后滑动屏幕

我维护一个网站，有全屏幕背景的照片，并在照片顶部的文本面板。基本jQuery的：按一下按钮，文本面板滑开屏幕，单击另一个按钮，将其向后滑动屏幕

这是我想要添加的功能：

单击“隐藏文字”按钮，使不放过屏幕上的文本面板动画，让游客可以看到整个背景照片。点击后的“隐藏文本”按钮应淡出，另一个按钮“显示文本”淡入另一个地方。当点击“显示文本”按钮时，文本面板应该从离屏左移回到适当的位置。同时，“显示文本”按钮应该淡出，而“隐藏文字”按钮，在应该褪色

要改换：

点击#hideText时，

aimate #mainPanel离开屏幕，淡出#hideText，淡入#showText。

点击#showText时，从当前位置

动画#mainPanel离开屏幕到适当的位置在屏幕上，淡出#showText，淡入#hideText

可能有人请告诉我如何用jQuery做到这一点？我会非常感谢实际的代码。

来源

2012-02-15 Dimitri Vorontzov

嗯，你问了很多东西 - 基本上是做整个东西其实。有很多教程可以在谷歌上找到。我们可以帮助您解决问题，但显然无法为您完成工作。检查这些：。点击（）]（http://api.jquery.com/click/） - [.fadeOut（）]（http://api.jquery.com/fadeOut/） - [淡入（）] （http://api.jquery.com/fadeIn/）... – 2012-02-15 06:26:24

http://jsfiddle.net/dXSPa/

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

和HTML（只是一个例子）

<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;'>

如果你不喜欢的宽度的效果可以容易地用于滑动改性出屏幕的左侧的，像这样http://jsfiddle.net/3FwWV/

ps：对于右边的按钮 - 点击按钮，而不是jsfiddle的跨度，单词'Result'

来源

2012-02-15 06:28:47 Cheery

Cheery--非常感谢你，这真是太棒了！ - 除了我在的jsfiddle看似乎相反是工作的：当“隐藏文本”按钮后，会出现一个文本面板，和“显示文本”，在“显示文本”点击变淡没有结果...我可能请问你更新你的答案，使其工作？我会很感激。 – 2012-02-15 06:32:26

@DimitriVorontzov'点击“显示文本”没有result..'它的工作原理，有来自于它与词“结果”中的jsfiddle半透明的股利。它在按钮上，点击按钮，而不是在div上。 – Cheery 2012-02-15 06:36:14

我现在看到！但 - “隐藏文字”按钮不会隐藏文字，它会显示它。反之亦然。我如何反转？ :-) – 2012-02-15 06:39:02

http://jqueryui.com/demos/hide/

确认滑动效果和实施在这里。

来源

2012-02-15 06:15:29 linuxeasy

谢谢LinuxEasy - 演示你对我有意思，但它并不完全符合我要找的。我想我用笨拙的方式用文字解释它。我刚刚编辑了一下这个问题，你可以看看吗？ – 2012-02-15 06:23:34

您可以查看给定链接处提供的来源。它显示了它的实现。所以你想放的代码已经存在了，其他选项也可以通过检查其他动画来检查。而链接上显示的效果只能在点击按钮上进行。 – linuxeasy 2012-02-15 06:27:49

基本jQuery的：按一下按钮，文本面板滑开屏幕，单击另一个按钮，将其向后滑动屏幕

回答

相关问题