如何并行运行 2 个幻灯片动画？
Posted
技术标签:
【中文标题】如何并行运行 2 个幻灯片动画？【英文标题】：How I can run 2 slide animations in parallel? 【发布时间】：2021-11-25 21:24:18 【问题描述】：我尝试制作一个简单的幻灯片：
$(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>但我想要的是在幻灯片隐藏下一张开始显示的同时。我想要实现的动画是继续向左移动的部分，同时下一张幻灯片继续向左移动。
现在先是现有的幻灯片，然后下一张将向后滑动。但我想以某种方式并行化两个动画。
【问题讨论】：
【参考方案1】：考虑使用 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/
【讨论】：
以上是关于如何并行运行 2 个幻灯片动画？的主要内容，如果未能解决你的问题，请参考以下文章