如何在用户单击时滑动容器

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 开始动画

以上是关于如何在用户单击时滑动容器的主要内容,如果未能解决你的问题,请参考以下文章

如何向下滑动高度为 100vh 的移动菜单?

如何使用 angularjs 在单击或滑动时重复对象?

如何在导航视图控制器上滑动时进行即时转换

单击 ImageView 时如何打开滑动导航抽屉?

Jquery滑块在按钮单击时更新滑块位置时停止滑动

滑动动画切换窗口或容器组件