动画一些div只有一次

我试图在用户滚动到页面上的特定位置后动画一些div。问题是我希望它只发生一次。我用布尔标志，但它似乎并不喜欢它。动画一些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; 
    } 
)};

谢谢！

来源

2016-02-04 dll_onFire

你通过与“散列”类的每一个元素循环，所以动画是要火的这些每一个。 – JamieC

您可以添加一个虚拟css类并检查它是否存在。 – reporter

['.one（）']（http://api.jquery.com/one/）怎么样？或者看看['.off（）']（http://api.jquery.com/off/） –

从你的问题

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

听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，以便它会生成一次动画。

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

来源

2016-02-04 14:25:30

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

你的准备函数的末尾括号被翻转。

来源

2016-02-04 14:27:17

对方回答是正确的，但它可以是这样的美好：

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

来源

2016-02-04 14:31:47 Jelly

动画一些div只有一次

回答

相关问题