jquery - 使用 jQuery 切换页面

Question

我正在使用以下代码在单页网站上显示/隐藏“页面”，并希望实现过渡/缓动效果，以软化页面更改。不幸的是，这超出了我微弱的能力。

          <script>
              $(document).ready(function () {
                $("#page1").addClass("makevisible");
                $("#page1next").click(function () {
                    $("#page1").removeClass("makevisible");
                    $("#page2").addClass("makevisible");
                });
              });
          </script>

欢迎提出任何建议并提前致谢。

Answer 1

.fadeIn 和 .fadeOut 听起来非常适合这种事情。它们为不透明度设置动画，并为您希望淡入淡出持续多长时间提供参数，并处理 display 属性以自动从 DOM 显示/隐藏。

http://api.jquery.com/category/effects/fading/

半秒转换的代码：

      <script>
          $(document).ready(function () {
            $("#page1").fadeIn(500);
            $("#page1next").click(function () {
                $("#page1").fadeOut(500);
                $("#page2").fadeIn(500);
            });
          });
      </script>