时间戳

首页 > 解决方案 > 如何并行运行 2 个幻灯片动画？

javascript - 如何并行运行 2 个幻灯片动画？

问题描述

我尝试制作一个简单的幻灯片：

$(document).ready(function() {
  $("button").on('click', function() {
    $('.slide[data-slide-status="shown"]').hide('slide', {
      direction: 'left'
    }, function() {
      $('.slide[data-slide-status="shown"]').attr("data-slide-status", "hidden")
      $("#three").show('slide', {
        direction: 'right'
      }, function() {
        $("#three").attr("data-slide-status", "shown")
      })
    })
  });
})
.slide[ data-slide-status="hidden"] {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<body class="container">
  <header class="col-12 d-flex flex-column align-items-center mb-1 mt-1">
    <h1>Hello</h1>
  </header>
  <main class="col-12 d-flex float-none mb-1">
    <section id="one" data-slide-status="shown" class="col-12 slide flex-column text-center">
      <div style="background-color:blue; color:white;">
        ONE
      </div>
      <button class="btn btn-secondary">Next</button>
    </section>
    <section id="three" data-slide-status="hidden" class="slide col-12 slide text-center" style="background-color:yellow;">
      THREE
    </section>
  </main>
  <footer class="text-center col-12 bg-dark text-light float-none">
    Lorem Ipsum
  </footer>
</body>

但我想要的是当幻灯片隐藏下一张开始显示时。我想要实现的动画是继续向左移动的部分，同时下一张幻灯片继续向左移动。

现在先是现有的幻灯片，然后是下一张幻灯片。但我想以某种方式并行化两个动画。

标签： javascriptjqueryjquery-uijquery-animate

解决方案

考虑使用 Animate 来移动所有幻灯片。

$(document).ready(function() {
  $("button").on('click', function() {
    $("#three").attr("data-slide-status", "shown");
    var d = Math.round($("main").width());
    $("#one, #three").animate({
      left: "-=" + d
    });
  });
})
main.mb-1 {
  width: 450px;
  overflow: hidden;
}

.slide[ data-slide-status="hidden"] {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0-rc.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<body class="container">
  <header class="col-12 d-flex flex-column align-items-center mb-1 mt-1">
    <h1>Hello</h1>
  </header>
  <main class="col-12 d-flex float-none mb-1">
    <section id="one" data-slide-status="shown" class="col-12 slide flex-column text-center">
      <div style="background-color:blue; color:white;">
        ONE
      </div>
      <button class="btn btn-secondary">Next</button>
    </section>
    <section id="three" data-slide-status="hidden" class="slide col-12 slide text-center" style="background-color:yellow;">
      THREE
    </section>
  </main>
  <footer class="text-center col-12 bg-dark text-light float-none">
    Lorem Ipsum
  </footer>
</body>

查看更多：https ://api.jquery.com/animate/

推荐阅读