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

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 4035 days ago, the information mentioned may be changed or developed.

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

输入

右边

左边

12 replies • 2015-05-11 16:06:52 +08:00

b821025551b

May 11, 2015

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

coosir

May 11, 2015

AJAX

lzxgh621

May 11, 2015

js动画

MaiCong

May 11, 2015

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

cxe2v

May 11, 2015

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

yumijie

May 11, 2015 via Android

@MaiCong 我只能膜拜，谢谢

yumijie

May 11, 2015 via Android

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

yumijie

May 11, 2015 via Android

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

liuhaotian

May 11, 2015

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

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

FastMem

May 11, 2015

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

FastMem

May 11, 2015

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

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

FastMem

May 11, 2015

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