悬停时的 jQuery 随机链接颜色

Question

下面的脚本完美运行。但是，这并不是我想要实现的目标。我想让它“悬停”以选择一种颜色并停留在它上面，而不是在悬停时循环浏览每个链接的所有颜色。你可以在这里看到我不想要的效果示例 http://www.morxmedia.com/

$(document).ready(function() {
  original = $('.menu-item a').css('color');
  $('.menu-item a').hover(function() { //mouseover
    var rand = Math.floor(Math.random() * 4);
 if(rand == 0){var col = '#EAD325';}
 else if(rand == 1){var col = '#FE902F';}
 else if(rand == 2){var col = '#82BE38';}
 else if(rand == 3){var col = '#217AFC';}
 else{var col = '#888888';}

    $(this).animate({'color': col,});
  },function() { //mouseout
    $(this).animate({
      'color': original,
    });
  });
});

Answer 1

为每个链接生成一个随机颜色，并将其保存到一个数组中。在悬停时，它会检查它应该是什么颜色，并为其设置动画。

参见工作示例:http://jsfiddle.net/fRqj2/

$(document).ready(function() {

    var assignedColors = new Array();

    $('.menu-item a').each(function(i) {
        var rand = Math.floor(Math.random() * 4);
        if (rand == 0) {
            var col = '#EAD325';
        }
        else if (rand == 1) {
            var col = '#FE902F';
        }
        else if (rand == 2) {
            var col = '#82BE38';
        }
        else if (rand == 3) {
            var col = '#217AFC';
        }
        else {
            var col = '#888888';
        }
        assignedColors[i] = col;
    });

    original = $('.menu-item a').css('color');
    $('.menu-item a').hover(function() { //mouseover
        index = $(this).parent().prevAll().length;
        $(this).animate({
            'color': assignedColors[index]
        });
    }, function() { //mouseout
        $(this).animate({
            'color': original,
        });
    });
});