如何在用户单击时滑动容器
Posted
技术标签:
【中文标题】如何在用户单击时滑动容器【英文标题】:How to slide a container on user click 【发布时间】:2018-03-24 00:57:23 【问题描述】:我是 javascript 新手,我已经设置了注册和登录屏幕我希望它在用户单击注册或登录时滑动,但我的 index.js 给了我错误任何方法来解决这个问题,或者我是执行错了吗? 登录界面:
我的代码:
【问题讨论】:
第一次尝试用你的双手,第二次在你尝试做一些编码时发布你的错误 【参考方案1】:<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$("button").click(function()
$("div").animate(
left: '250px'
);
);
);
</script>
</head>
<body>
<button>Start Animation</button>
<p>By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
【讨论】:
【参考方案2】:如果你使用 jQuery,那么你可以添加 class/ID.slideToggle(),这样就可以了
试试下面的参考网址:w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1
<!DOCTYPE html>
<html>
<head>
<script src="ajax.googleapis.com/ajax/libs/jquery/3.2.1/…;
<script>
$(document).ready(function()
$("button").click(function()
$("div").animate(left: '250px');
);
);
</script>
</head>
<body>
<button>Start Animation</button>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
</body>
</html>
【讨论】:
如何添加 JQuery? 试试下面的参考网址:w3schools.com/jquery/tryit.asp?filename=tryjquery_animation1 开始动画以上是关于如何在用户单击时滑动容器的主要内容,如果未能解决你的问题,请参考以下文章