只为某些 div 设置一次动画答案

【问题标题】：Animate some divs only once只为某些 div 设置一次动画
【发布时间】：2016-02-04 22:36:20
【问题描述】：

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

你们都建议我做什么？

::代码甚至没有运行

仅供参考，我不想使用 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;
    }
)};

谢谢！

【问题讨论】：

您正在循环使用“hash”类的每个元素，因此动画将为每个元素触发。
您可以添加一个虚拟 css 类并检查它是否存在。
$.one() 怎么样？或者看$.off()
最后一行错了，把)};改成});。下面的答案解决了您对此评论的问题

标签： javascript jquery html css

【解决方案1】：

根据你的问题

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

收听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;
       }
     });
   )};

cmets 的替代品。检查元素是否具有类（或属性）。下面的代码检查元素是否具有data-noanimate 属性。如果是，它不会动画，如果不是，它将动画并添加data-noanimate，以便它会动画一次。

   $(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);
           }
         });
       }
     });
   )};

【讨论】：

【解决方案2】：

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;
  }
});

您在 ready 函数末尾的括号被翻转了。

【讨论】：

【解决方案3】：

另一个答案是正确的，但最好是这样：

$(function() {
    $(window).on('scroll', function(){
        if ($(window).scrollTop() > 760) {
            $('.hash').each(function(i) {
                $(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
            });
            // without boolean value,you can off `scroll` event
            $(window).off('scroll');
        }
    })
});

【讨论】：