jquery 生成的 div 标签的随机颜色不是永久性的

我的目标是让每个div都有一个"随机颜色"类，以获得随机的背景颜色。唯一的问题是 2 秒后它消失了。这是我的代码：我这里有来自帖子的脚本随机div 颜色。请解决问题。

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
    $(".random-color").each(function() {
        $(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
    });
});
window.sr = new scrollReveal();

div {
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
#d1 {
  background-color: #00A388;
}
#d2 {
  background-color: #FFFF9D;
}
#d3 {
  background-color: #BEEB9F;
}
#d4 {
  background-color: #79BD8F;
}

<script src="http://scrollrevealjs.org/js/scrollReveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
  <p data-sr>Scroll Reveal-Default</p>
  <!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
  <!-- Reveal with a downward motion -->
  <div class="random-color" data-sr='enter top'>enter top</div>
  <br>
  <!-- The other accepted values... -->
  <div class="random-color" data-sr='enter left'>enter lef</div>
  <br>
  <div class="random-color" data-sr='enter right'>enter right</div>
  <br>
  <div class="random-color" data-sr='enter bottom'>enter bottom</div>
  <br>
  <!--Enter Properties Ends-->
  <!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
  <div class="random-color" data-sr='move 24px'>move 24px</div>
  <!--Enter Properties Ends-->
  Over The over keyword sets the duration (in seconds) of your animation.
  <div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
  <div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
  Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).
  <div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
  <div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
  <div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
  <div class="d4" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>
</body>
</html>

你正在使用的库ScrollReveal用它自己的 css 替换你的 css。清理代码片段并删除库会使您的代码正常工作 - 即，您编写的jQuery为页面上的元素分配随机背景颜色并没有什么特别的错误

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
    $(".random-color").each(function() {
        $(this).css('background-color', colors[Math.floor(Math.random() * colors.length)]);
    });
});

div {
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
#d1 {
  background-color: #00A388;
}
#d2 {
  background-color: #FFFF9D;
}
#d3 {
  background-color: #BEEB9F;
}
#d4 {
  background-color: #79BD8F;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
  <p data-sr>Scroll Reveal-Default</p>
  <!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
  <!-- Reveal with a downward motion -->
  <div class="random-color" data-sr='enter top'>enter top</div>
  <br>
  <!-- The other accepted values... -->
  <div class="random-color" data-sr='enter left'>enter lef</div>
  <br>
  <div class="random-color" data-sr='enter right'>enter right</div>
  <br>
  <div class="random-color" data-sr='enter bottom'>enter bottom</div>
  <br>
  <!--Enter Properties Ends-->
  <!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
  <div class="random-color" data-sr='move 24px'>move 24px</div>
  <!--Enter Properties Ends-->
  Over The over keyword sets the duration (in seconds) of your animation.
  <div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
  <div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
  Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).
  <div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
  <div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
  <div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
  <div class="d4" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>
</body>
</html>

如果您查看库的文档，它会在动画完成时触发一个事件 - 此时您可以应用自己的 css 而不会被替换。

var colors = ['red', 'green', 'blue', 'orange', 'yellow'];
$(document).ready(function() {
   
  
window.sr = new scrollReveal({
  complete:function(el){
        var $this = $(el);
        if($this.hasClass('random-color')){
          $this.css('background-color', colors[Math.floor(Math.random() * colors.length)])
        }
    }
  });
});

div {
  height: 40px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
}
#d1 {
  background-color: #00A388;
}
#d2 {
  background-color: #FFFF9D;
}
#d3 {
  background-color: #BEEB9F;
}
#d4 {
  background-color: #79BD8F;
}

<script src="http://scrollrevealjs.org/js/scrollReveal.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
  <p data-sr>Scroll Reveal-Default</p>
  <!--Enter Properties The enter keyword controls the vector origin (direction) of your animation.-->
  <!-- Reveal with a downward motion -->
  <div class="random-color" data-sr='enter top'>enter top</div>
  <br>
  <!-- The other accepted values... -->
  <div class="random-color" data-sr='enter left'>enter lef</div>
  <br>
  <div class="random-color" data-sr='enter right'>enter right</div>
  <br>
  <div class="random-color" data-sr='enter bottom'>enter bottom</div>
  <br>
  <!--Enter Properties Ends-->
  <!--Move Properties The move keyword controls the distance (in pixels) traveled during animation.-->
  <div class="random-color" data-sr='move 24px'>move 24px</div>
  <!--Enter Properties Ends-->
  Over The over keyword sets the duration (in seconds) of your animation.
  <div class="random-color" data-sr='over 0.6s'>over 0.6s</div>
  <div class="random-color" data-sr='over 1.3s'>over 1.3s</div>
  Flip The flip keyword is a rotation keyword, controlling rotation along the X axis (pitch).
  <div class="d1" data-sr="enter left, hustle 20px">enter left, hustle 20px</div>
  <div class="d2" data-sr="wait 2.5s, ease-in-out 100px">wait 2.5s, ease-in-out 100px</div>
  <div class="d3" data-sr="move 16px scale up 20%, over 2s">move 16px scale up 20%, over 2s</div>
  <div class="d4 random-color" data-sr="enter bottom, roll 45deg, over 2s">enter bottom, roll 45deg, over 2s</div>
</body>
</html>

在我看来，

您正在将数学函数应用于字符串。您提供的示例基于三个数字值（255-199）生成颜色，您正在尝试将其应用于"红色"、"绿色"等......

尝试使用示例中的代码，看看你得到了什么。

尝试在 document.ready 中运行 scrollReveal

 $(document).ready(function() {
    window.sr = new scrollReveal();
})

颜色已在文档中运行。

希望对您有所帮助！

相关内容

最新更新

热门标签：