jQueryランダムなリンクの色でホバー

Question

下のスクリプトは完全に動作します。しかし、それは私が達成しようとしているものではありません。私は1つの色を選択し、ホバー上のリンクごとにすべての色をサイクリングするのではなく、その上にとどまるために 'ホバリング'したいと思います。あなたは、私がここに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

リンクごとにランダムな色を生成し、配列に保存します。ホバーでは、それはどの色であるべきかをチェックし、それにアニメートします。私はJavaScriptを使用して非常に効率的ではありませんよ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, 
     }); 
    }); 
}); 

Answer 2

あなたは.data()を持つ要素に色をマークすることができたくない効果の例を見ることができます。このようなもの：

... 
    col = $(this).data("hoverColor"); // Tries to load the color for the element 
    if (! col) { 
    col = getRandomColor(); 
    $(this).data("hoverColor", col); // Saves the color for the element 
    } 
    ...