Question

我的目标是每个div都有一个“随机颜色”类，有一个随机的背景颜色。使用jquery生成随机颜色也正常工作。唯一的问题是在2秒后它消失了。这是我的代码：我在帖子Random Div Color中有脚本。请解决问题。

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>

Answer 1

您正在使用的库ScrollReveal正在用自己的库替换您的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>

如果你查看你的库的documentation，它会在动画结束时触发一个事件 - 此时你可以应用你自己的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>

Answer 2

在我看来，你正在将一个Math函数应用于字符串。您提供的示例基于三个数字值（255-199）生成颜色，并且您尝试将其应用于“红色”，“绿色”等...

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

Answer 3

尝试在document.ready中运行scrollReveal

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

颜色已在document.ready中运行

希望它有所帮助！

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

3 个答案: