Question

我正在维护一个拥有全屏背景照片的网站，以及照片顶部的文本面板。

以下是我要添加的功能：

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

改写它：

单击#hideText时，

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

单击#showText时，

动画#mainPanel从当前位置离开屏幕到屏幕上的正确位置，淡出#showText，淡入#hideText

有人可以告诉我如何使用jQuery执行此操作吗？我会非常感谢实际的代码。

Answer 1

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

在此检查幻灯片效果和实施。

Answer 2

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'

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

2 个答案: