[英]How to display/show multiple div elements one by one using jquery?
我在 HTML 页面中有多个 div 元素。 这些 div 正在为一个 window 滚动设置动画。 问题是当我滚动滚动条时，所有的 div 都会立即动画化。 我不想要这个。 如果滚动条到达特定的 position，我想要一个 div 动画，然后，第二个 div 应该动画等等。 换句话说，我想在 window 滚动上一个一个地为多个 div 设置动画。 我正在使用自定义 animation。 我的 jQuery 代码：
$(document).ready(function(){
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y < 500) {
$('.demo').addClass('intro');
}
else{
$('.demo').addClass('fadeInUp');
}
});
});
我的 CSS 代码与自定义 animation：
.intro{
opacity:0;
}
.styling {
height: 300px;
width: auto ;
background-color: red;
margin-top: 10px;
}
@-webkit-keyframes fadeInUpA {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
transform: none;
}
}
@keyframes fadeInUpA {
0% {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
-ms-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
100% {
opacity: 1;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
}
.fadeInUp {
animation-duration: 3s;
animation-delay: 2s;
-webkit-animation-name: fadeInUpA;
animation-name: fadeInUpA;
animation-fill-mode: both;
}
我的 HTML 代码如下
<body>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
<div class="intro styling demo"></div>
</body>
您的代码需要了解滚动时的每个div position，考虑使用$('.intro').offset().top来获取相对于文档的元素 position。 此外，必须考虑每个div的高度，以便了解$(this).scrollTop()是否越来越接近元素。
我建议您使用插件来实现此目的： https://wowjs.uk/
如果您寻求一个好的解决方案，我推荐Animejs 。 但是如果你想自己做，你可以简单地获取所有元素并通过循环添加你的 animation class ：
const elements = documents.querySelectorAll('.intro');
elements.forEach(el => {
setTimeout(() => {
el.classList.add('fadeInUp')
}, 1000);
});
我为您制作了一个固定版本，不是 100% 确定这是否是您想要的，如果有问题请告诉我。
您的divs一次动画的问题是它们都有相同animation-delay ，所以我通过在css其注释掉并为每个div添加自定义animation-delay来解决这个问题，正如您将在我的代码中看到的那样，所以基本上，现在每个div的animation-delay比前一个长 0.5 秒。
让我知道它是否有效:)
问题是您一次将 class 添加到所有 div 中。 首先检查 div 在滚动后是否可见，然后将 class 添加到该 div。
$(document).ready(function() { $(document).scroll(function() { animate(); }); animate(); function animate() { var $divs = $(".demo"); $.each($divs, function() { if (isVisible(this)) { $(this).addClass('fadeInUp'); } else { $(this).addClass('intro'); } }); } function isVisible(elem) { var docViewTop = $(window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var elemTop = $(elem).offset().top; var elemBottom = elemTop + $(elem).height(); return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); } });
.intro { opacity: 0; }.styling { height: 300px; width: auto; background-color: red; margin-top: 10px; } @-webkit-keyframes fadeInUpA { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUpA { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); -ms-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } 100% { opacity: 1; -webkit-transform: none; -ms-transform: none; transform: none; } }.fadeInUp { animation-duration: 3s; animation-delay: 2s; -webkit-animation-name: fadeInUpA; animation-name: fadeInUpA; animation-fill-mode: both; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> <div class="intro styling demo"></div> </body>
使用一个onclick javascript函数在多个元素中显示相同的div
[英]using one onclick javascript function to show same div in multiple elements
如何逐个隐藏元素然后使用jquery逐个显示它们？
[英]How to hide elements one by one then show them one by one using jquery?
如何排序一个div的隐藏顺序，然后使用jQuery动画显示另一个div？
[英]How to sequence the hiding of one div then show another using jQuery animations?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.