各位大侠，有什么方法实现"拉窗帘"或者说"推门"效果……

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 3484 天前的主题，其中的信息可能已经有所发展或是发生改变。

具体效果是这样的:我想把主页做成左边一半白色，右边一半黑色！左边有个用户输入框，右边一个密码输入框！输入用户名，密码！点击登录，半边白色和黑色都渐渐退出，让访客看到首页内容！

输入

右边

左边

12 条回复 • 2015-05-11 16:06:52 +08:00

b821025551b

2015-05-11 13:33:25 +08:00

http://www.w3school.com.cn/jquery/jquery_fade.asp

coosir

2015-05-11 13:54:36 +08:00

AJAX

lzxgh621

2015-05-11 14:14:44 +08:00

js动画

MaiCong

2015-05-11 14:41:54 +08:00

我写个给你看看：
http://codepen.io/anon/pen/rVxddV

cxe2v

2015-05-11 14:43:25 +08:00

用jquery的slide方法，或者animation方法

yumijie

2015-05-11 15:29:19 +08:00 via Android

@MaiCong 我只能膜拜，谢谢

yumijie

2015-05-11 15:30:02 +08:00 via Android

@b821025551b 谢谢，我淡入淡出效果不是我想要的

yumijie

2015-05-11 15:30:49 +08:00 via Android

谢谢诸位！菜鸟学这个真是伤脑筋

liuhaotian

2015-05-11 15:54:07 +08:00

为什么发在了 PHP 节点呢？你说拉窗帘，那么一定是在说这个了
http://codepen.io/VEXIO/pen/xGZjbL

@MaiCong 你的html 和css被我抄袭了

FastMem

2015-05-11 15:57:55 +08:00

@yumijie 啊噗。。就是这个。你自己看卖葱给你实例就知道了 fadeOut fadeIn

FastMem

2015-05-11 16:05:29 +08:00

$(function(){
$(".btn").on('click',function() {
$(".left-door").animate({left:'-1000px'},1000);
$(".right-door").animate({right:'-1000px'},1000);
$(".page-content").show();
})
});

照着楼上的，我用animate写了一个

FastMem

2015-05-11 16:06:52 +08:00

@FastMem http://codepen.io/anon/pen/waMjGL