jQuery 마우스 오버시 랜덤 링크 색상

Question

아래 스크립트는 완벽하게 작동합니다. 그러나, 그것은 내가 성취하려고하는 것이 아닙니다. 마우스를 올리면 1 개의 색상을 선택하고 마우스를 올리면 링크 당 모든 색상을 순환하는 대신에 그 위에 머무르고 싶습니다. 당신은 효과의 예 난 당신이 .data()와 요소에 색상을 표시 할 수 있습니다 여기 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, 
     }); 
    }); 
}); 

Answer 2

을 원하지 않는 볼 수 있습니다. 다음과 같은 내용 :

... 
    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 
    } 
    ...