Question

基本上我正在尝试切换逐渐改变div背景颜色的功能。有一个单独的script.js文件负责运行的函数gradientify（）。

我只是不确定切换函数的逻辑是什么......

的index.html

<body>
    <button type="button" id="btn"></button>
    <div style="width: 100px; height: 100px;"></div>
</body>

的script.js

$('#btn').click(function() {
    $('div').toggle(function() {
        $(this).gradientify({
        gradients: [
            { start: [49,76,172], stop: [242,159,191] },
            { start: [255,103,69], stop: [240,154,241] },
            { start: [33,229,241], stop: [235,236,117] }
        ]
    });
    });
});

Answer 1

Jquery toggle函数切换元素的可见性。它基本上将css属性display设置为display: none。如果你想要内容和＃34; gradientifyied＆＃34;切换渐变时仍然可以看到元素，然后您就无法使用Jquery.toggle。

遗憾的是，一旦将元素设置在一个元素上，它就是一个渐变的API doesn't provide any way to cancel the gradients，因此切换一个元素上渐变的唯一方法就是将它从DOM中一起移除。

我们可以在应用渐变之前创建clean元素的副本，当我们想要删除渐变时，我们从DOM中删除旧元素并插入我们保留的副本。

＆＃13;

function toggleGradients() {
  var gradientTargetCopy = $( ".gradientTarget" ).clone()
  var gradientsOff = true;
  return function() {
    if (gradientsOff) {
      $('.gradientTarget').gradientify({
        gradients: [
          { start: [49,76,172], stop: [242,159,191] },
          { start: [255,103,69], stop: [240,154,241] },
          { start: [33,229,241], stop: [235,236,117] }
        ]
      });
    } else {
      $('.gradientTarget').remove()
      $('body').append(gradientTargetCopy)
      gradientTargetCopy = $( ".gradientTarget" ).clone()
    }
    gradientsOff = !gradientsOff
  }
}

$('#btn').click(toggleGradients());

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://codefog.github.io/jquery-gradientify/jquery.gradientify.min.js"></script>

<body>
    <button type="button" id="btn">Toggle gradients</button>
    <div class="gradientTarget" style="width: 100px; height: 100px;">Hello!</div>
</body>

＆＃13;

Answer 2

只需使用纯JavaScript。

    var x = 3; //Length of amount of color options you want
var bgcolor_num = Math.floor((Math.random() * x) + 1);
        setInterval(function () {
            if (bgcolor_num === 1) {
                bgcolor = "#FF0000";
                bgcolor_num = 2;
            } else if (bgcolor_num === 2) {
                bgcolor = "#00FF00";
                bgcolor_num = 3;
            } else {
                bgcolor = "#0000FF";
                bgcolor_num = 1;
            }

            document.getElementById('whatever').style.backgroundColor = bg_color;
        }, 12000);

它会定义一个变量x，并将一个数字从1到x随机化。然后，间隔（每12秒运行一次; 12,000毫秒）确定数字bgcolor_num是否为1,2,3或其他内容。请记住，您拥有的选项数量必须等于 x 。如果它没有，它将作为＆＃34;否则＆＃34;并将从颜色选项＃1开始。

确保您为div设置了ID并重新配置实际触发更改的部分！

如果您想要一个这样的例子，您可以随时访问我的网站typrograms.com/RGB.html并右键单击，查看源代码！我使用类似的方法，它会慢慢改变颜色。

切换功能，即gradientifies背景颜色

2 个答案: