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

发布于 2025-01-05 16:55:10 字数 429 浏览 1 评论 0原文

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

这是我要添加的功能：

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

换句话来说：

单击#hideText 时，

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

单击 #showText 时，

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

伊面 2025-01-12 16:55:10

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”一词的跨度

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

and html (just for an example)

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

if you do not like the width effect it can be easily modified for the slide out of the left side of screen, like this http://jsfiddle.net/3FwWV/

ps: for the button on the right - click on the button, not on the jsfiddle's span with word 'Result'

回复收藏 0 原文