如何循环通过背景颜色悬停与jQuery

How to Cycle Through Background Colors on Hover with jQuery

本文关键字：颜色 背景 悬停 jQuery 何循环 循环      更新时间：2023-09-26

我正在尝试创建一个div，当鼠标悬停在背景颜色上时循环。我已经弄清楚了如何使背景颜色切换到mouseenter上的一组值的颜色值，但不知道如何使它继续前进。

如何使背景颜色不断变化，而鼠标悬停在元素上(并停止一旦我把鼠标移出)?

这是目前为止我所拥有的一个完整的小提琴:

我的HTML: 

<body>  
    <div id="coloredDiv" data-index="-1"></div>
</body>

我的CSS: 

#coloredDiv {
    width:200px;
    height:200px;
    border:1px solid #888;
}
#coloredDiv:hover {
    cursor:pointer;
}
我jQuery: 

var colors = ['#eeeeee', "#00ff00", "#ff0000", "#000000"];
$(document).ready(function () {
    $colorDiv = $('#coloredDiv');
    ln = colors.length;
    $('#coloredDiv').mouseenter( function () {
        var i = $colorDiv.data("index");
        ++i;
        if (i >= ln) i = 0;
        $colorDiv.css({
            'background-color': colors[i]
        });
        $colorDiv.data("index", i);
    });
});

使用Array.shift和Array.push使循环发生

小提琴

var counter = 0;
var colors = [
    "#eeeeee",
    "#00ff00",
    "#ff0000",
    "#000000"];
var $div = $('#coloredDiv');
$('#coloredDiv').mouseenter(function () {
    var color = colors.shift(); //Get the top color
    colors.push(color); //push it to the end for the cycle to repeat.
    $div.css({
        "background-color": color
    })
});

让循环在悬停时重复:-

var counter = 0;
var colors = [
    "#eeeeee",
    "#00ff00",
    "#ff0000",
    "#000000"];
var $div = $('#coloredDiv');
var interval;
$('#coloredDiv').mouseenter(function () {
    interval = window.setInterval(changeColor, 1000); //set the interval of 1 sec for image to change while hovered.
}).mouseleave(function () {
    window.clearInterval(interval); //clear the interval on mouseOut.
});
function changeColor() {
    var color = colors.shift();
    colors.push(color);
    $div.css({
        "background-color": color
    });
}

小提琴

(function() {
  var element = $('#id');
  var colors = ['#eeeeee', "#00ff00", "#ff0000", "#000000"];
  var idx = 0;
  var timer;
  function changeColor() {
    element.css('background-color', colors[idx++ % colors.length]);
  }
  element.hover(
    // start hover
    function() {
      idx = 0;
      changeColor();
      timer = setInterval(changeColor, 250);
    },
    // end hover
    function() {
      clearInterval(timer);
      element.css('background-color', '');
    }
  );
}());
相关文章：