只为某些 div 设置一次动画 [英] Animate some divs only once

问题描述

我试图在用户滚动到页面上的特定位置后为一些 div 设置动画.问题是我希望它只发生一次.我使用了布尔标志，但它似乎不喜欢它.

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.

你们都建议我做什么?

::代码甚至没有运行

仅供参考，我不想使用 PHP

FYI I don't want to use PHP

var once = false;

$(document).ready(function() {
    if ($(window).scrollTop() > 760 && once == false) {
        $('.hash').each(function(i) {
            $(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
        });
        once = true;
    }
)};

谢谢！

推荐答案

来自你的问题

在用户滚动到页面上的特定位置后

after the user scrolls to a specific position on the page

监听scroll事件

   $(document).ready(function() {
     var once = false;
     $(document).on('scroll', function(){
       if ($(window).scrollTop() > 760 && once==false){
         $('.hash').each(function(i) {
           $(this).fadeOut(0).delay(1000*i).fadeIn(1000);
         });
         once=true;
       }
     });
   )};

来自评论的替代方案.检查元素是否具有类(或属性).下面的代码检查元素是否具有 data-noanimate 属性.如果是它不会动画，如果不是它会动画并添加 data-noanimate 以便它会动画一次.

Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.

   $(document).ready(function() {
     $(document).on('scroll', function(){
       if ($(window).scrollTop() > 760){
         $('.hash').each(function(i) {
           if($(this).attr('data-noanimate') === undefined){
               $(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
           }
         });
       }
     });
   )};

这篇关于只为某些 div 设置一次动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！