jQuery는 요소의 색상을 grabing합니다. PRE : hover

Question

일반적인 '색상 확인 플래시'기능을 만들면 객체의 배경을 녹색으로 깜박이고 기존 색상이 무엇이든간에 사라집니다. .

그래서 내가() 클릭이 메소드를 호출 해 두 가지 요소가있을 수 있습니다 : 내가 처음 하나를 클릭하면

li background-color: red 
li background-color: black 

를, 그것은 녹색에서 빨간색으로 사라질 것입니다. 첫 번째 버튼을 클릭하면 녹색에서 검은 색으로 희미 해집니다.

JQuery와 논리 :

클릭 이벤트 :

listItem.each(function(){confirmFlash($(this),$(this).css("backgroundColor"))}); 

함수는 :

function confirmFlash(objectToFlash,backgroundColor){ 
    objectToFlash.css("backgroundColor","#84da9a").animate({opacity: 1}, 1000).animate({backgroundColor: backgroundColor}, 500); 
} 

이 잘 작동합니다. 캐치 : 나는 또한 LI의 위를 줄 경우

가 : 가져가 상태 배경색 : 내 페이드 그런

li background-color: red 
li background-color: black 
li:hover background-color: purple 

모든 보라색, 녹색에서 이동합니다. 이는 LI를 클릭 할 때 배경이 실제로 보라색이기 때문에 의미가 있습니다.

'비 호버 (non-hover)'CSS 클래스의 배경 색상을 잡는 좋은 방법이 있습니까?

다시 말하면, 가상 클래스보다는 LI의 현재 클래스에 할당 된 배경색을 잡고 싶습니다.

또는 CSS가 아닌 마우스를 구현하는 솔루션은 jQuery를 통해서도 가능합니까?

Answer 1

색상을 직접 애니메이션으로 적용 할 수있는 색상 플러그인을 설치해야합니다. 불투명도에 애니메이션을 적용하면 텍스트와 배경이 모두 애니메이션으로 표시되기 때문에 문제가 발생합니다.

참조 : http://plugins.jquery.com/project/color

Answer 2

당신은 당신이 confirmFlash 기능이 같은 바인딩 시점에서 변수의 초기 배경 색상을 저장할 수 ...

jQuery.fn.confirmFlash = function(config){ 
    this.each(function() { 
     var elem = jQuery(this); 

     // Store the starting background color 
     var startBg = elem.css("backgroundColor"); 

     // When the element is clicked 
     elem.click(function() { 
      // Set the start background color 
      elem.css("backgroundColor", startBg); 
      // Animate to the "flash" color 
      elem.animate({backgroundColor: config.backgroundColor}, {duration: 1000, complete: function() { 
       // Animate back to the start background color 
       elem.animate({backgroundColor: startBg}, {duration: 1000}); 
      }}); 
     }); 
    }); 
}; 

그리고 다음과 같이 사용할 수 있습니다 이 ...

$("li").confirmFlash({backgroundColor: "#84da9a"}); 

Answer 3

다음은 내가 생각해 낸 것입니다. CSS에서 hover 클래스를 생략하고 a.그때 추가하는 것이 가져 또는 JQuery와 통해 제거 : 클릭 이벤트에 트리거 기능에,

function createToggleList(){ 
    // create mouseovers/outs 
    $("ul.toggleList li").mouseover(function(){ 
     $(this).addClass("hover"); 
    }); 
    $("ul.toggleList li").mouseout(function(){ 
     $(this).removeClass("hover"); 
    });  
    // attach the click event 
    $("ul.toggleList li").click(function(){toggleToggleListItem($(this))}) 
}; 

다음에, 이었다 내가 띄운 클래스를 제거, 그래서 나는 그 배경을 잡을 수 마우스를하기 전에 :

function confirmFlash(objectToFlash,backgroundColor){ 
    objectToFlash.css("backgroundColor","#84da9a").animate({opacity: 1}, 1000).animate({backgroundColor: backgroundColor}, 500, function(){ 
     objectToFlash.removeAttr("style"); 
    }); 
} 

주 내가 ANIM 후 STYLE 속성을 제거해야합니다 :

function toggleToggleListItem(listItem) { 
    listItem.removeClass("hover"); 
    confirmFlash(listItem,listItem.css("backgroundColor")); 
}; 

그리고 여기에 플래시를 생성하는 기능입니다 ating. 애니메이션을 통해 생성 된 새로운 인라인 스타일이 아닌 CSS 파일에서 항목을 다시 상속 받기를 원합니다.

그 것이 작동합니다. 아휴!