jquery 鼠标悬停时循环显示指定的颜色

xkftehaa 于 2022-12-03 发布在 jQuery

关注(0)|答案(2)|浏览(135)

我有一个鼠标悬停（hover）状态，我有一组锚点，我把每个字母 Package 在一个跨度中，并从一个数组中为每个字母分配一种颜色。我想做的是，在鼠标悬停时，再次按顺序（从数组中）为每个跨度重复分配一种颜色，就像一个不断动画化的颜色序列跨越一个单词的每个字母一样。
更新：目前的锚周期（在安德鲁希勒的帮助下，我结束了针对当前而不是所有锚），但不是每个人循环到其下一个颜色...它的工作，但有点奇怪。
A simple visual of what I’m trying to do
我的开始如下：

var colors = [
    "red",
    "lightsalmon",
    "violet",
    "skyblue"];

  $('a').each(function (index) {
    var characters = $(this).text().split("");

    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
      $this.append(`<span style="color: ${colors[i % colors.length]}">${el}</span>`);
    });

  });

  $('a').on('mouseover', function () {
    var span = $(this).find('span');

    intervalId = setInterval(function () {
      color = colors.shift();
      span.each(function (i) {
        $(this).next().attr("style", `color:${colors[i % colors.length]}`);
      });
      colors.push(color);
    }, 500);
  }).on('mouseleave', function () {
    clearInterval(intervalId);
  });

https://jsfiddle.net/34bj70tn/

jquery

来源：https://stackoverflow.com/questions/74651616/cycle-through-assigned-colors-on-mouseover

2条答案

按热度按时间

rqqzpn5f1#

为了达到您所描述的效果，您可以使用setInterval函数重复地为每个span元素重新分配颜色。您可以使用setInterval调用一个函数来定期更新每个span元素的颜色。然后，您可以使用clearInterval函数，在鼠标器离开a元素时停止间隔：

var colors = [
    "red",
    "lightsalmon",
    "violet",
    "skyblue"
];

var intervalId; // Declare a variable to store the interval ID

$('a').each(function (index) {
    var characters = $(this).text().split("");

    $this = $(this);
    $this.empty();
    $.each(characters, function (i, el) {
        $this.append(`<span style="color: ${colors[i % colors.length]}">${el}</span>`);
    });
});

$('a').on('mouseover', function() {
    // Start the interval
    intervalId = setInterval(function() {
        color = colors.shift();
        $('span').each(function() {
            $(this).css('color', color);
        });
        colors.push(color);
    }, 1000); // Update colors every 1 second
}).on('mouseleave', function() {
    // Stop the interval when the mouse leaves the element
    clearInterval(intervalId);
});

赞(0）回复(0）举报 2022-12-03

uyto3xhc2#

CSS解决方案

彩虹选取框只能使用css：

将span元素中的每个字符换行
添加一些css variables以配置字幕
为颜色序列添加key frame动画
使用nth-child将动画应用于每个范围
详细数据

我们可以通过给每个角色添加一个负的timing delay来避免创建多个动画。这会使动画立即开始，但在前一帧。这样每个角色都以不同的颜色开始。
动画使用step-end定时。这会使动画像一个物理字幕一样进行尖锐（而不是渐进）的颜色过渡。
这个代码片段在页面加载时使用了一点JavaScript来 Package span中的文本字符。但是，如果您要在标记中添加span，则不需要JavaScript。

程式码片段

第一个

赞(0）回复(0）举报 2022-12-03

我来回答

jquery 鼠标悬停时循环显示指定的颜色

2条答案

相关问题

热门标签

最新问答