Question

我试图在用户滚动到页面上的特定位置后动画一些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;
    }
)};

谢谢！

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

评论的替代方案。检查元素是否具有类（或属性）。下面的代码检查元素是否具有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);
           }
         });
       }
     });
   )};

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

准备功能末尾的括号被翻转。

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

仅为一些div设置动画一次

3 个答案: