배경색 호버 페이드 효과 CSS

Question

첫째, 저는 초보자입니다. 단계별 지시가 필요합니다.

내가 대신 인스턴트의, 워드 프레스

a { 
    color:#000;} 
a:hover { 
    background-color: #d1d1d1; color:#fff; 
} 

내가 느린 링크에 가져가 원하는 내 링크에 부드러운 배경 호버 효과를 추가하고자합니다. 자바 스크립트 또는 jQuery가 필요합니까? 그렇다면 어떻게하는지 말해주십시오.

Answer 1

이것은 미용적인 효과가 있기 때문에 화재는 너무 중요하지 않습니다. 감안할 때 CSS 3 transformations을 살펴 보는 것이 좋습니다. 당신이 플러그인을 사용할 때까지

a { 
 
    color: #000; 
 
    transition: background 0.5s linear; 
 
} 
 
a:hover { 
 
    background-color: #d1d1d1; 
 
    color: #fff; 
 
}

<a href="http://example.com">Hover me</a>

Answer 2

참고 : 이것은 CSS 전환이 널리 사용되기 전에 작성되었습니다 (방금 나온 브라우저 지원이 충분하지 않았습니다). 오늘이 작업을 수행했다면 자바 스크립트가 아닌 CSS 전환을 사용하십시오.

예, 자바 스크립트가 필요합니다. jQuery로 쉽게 만들 수 있습니다.

난 당신이 초보자지만, 같은 것을 일을해야 그렇게 잘 모르겠어요 : 그럼

<SCRIPT type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></SCRIPT> 

:

당신은 스크립트 태그에 jQuery 라이브러리를 포함해야합니다

<SCRIPT type="text/javascript"> 
$(function() { 
    $('a').hover(
    function() { $(this).animate({ backgroundColor: '#d1d1d1', color: '#fff' }) }, 
    function() { $(this).animate({ backgroundColor: '',  color: ''  }) } 
); 
}); 
</SCRIPT> 

Answer 3

당신은 배경 색상을 애니메이션 할 수 없다. 플러그인은 jQuery를 만든 사람이 디자인 한 것입니다. http://plugins.jquery.com/project/color

js 파일을 더 크게 만들었 기 때문에 포함하지 않았습니다.

참고 : 불투명도는 변경할 수 있습니다.

Answer 4

CSS3 전환 효과는 찾고자하는 것에 효과적입니다. http://www.css3.info/preview/css3-transitions/

Answer 5

$(document).ready(function() { 
    var COLOR = { 
     fadeBackground: function(config){ 

      var totalStartPoint= config.startRED+config.startGREEN+config.startBLUE; 
      var totelEndPoint = config.endRED+config.endGREEN+config.endBLUE; 
      if(totalStartPoint < totelEndPoint){ 
       var clearTime = setInterval(
       function(){ 
        //elem.css("background-color", "rgb("+color.startRED+","+color.startGREEN+","+color.startBLUE+")"); 
        document.getElementById('jsFullAccessColor').style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")"; 
        if(config.startRED < config.endRED){ 
          config.startRED++; 
          } 
        if(config.startGREEN < config.endGREEN){ 
          config.startGREEN++; 
          } 
        if(config.startBLUE < config.endBLUE){ 
          config.startBLUE++; 
          } 
         if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){ 
          clearTimer(clearTime); 
          } 

       }, config.speed); 

       } 

       if(totalStartPoint > totelEndPoint){ 
        var clearTime = setInterval(
        function(){ 

         document.getElementById(config.element).style.background ="rgb("+config.startRED+","+config.startGREEN+","+config.startBLUE+")"; 
         if(config.startRED > config.endRED){ 
           config.startRED--; 
           } 
         if(config.startGREEN > config.endGREEN){ 
           config.startGREEN --; 
           } 
         if(config.startBLUE > config.endBLUE){ 
           config.startBLUE--; 
           } 
          if(config.startRED == config.endRED && config.startGREEN == config.endGREEN && config.startBLUE == config.endBLUE){    
           clearTimer(clearTime); 

           } 

        }, config.speed); 

       } 
     } 

    } 

    function clearTimer(timerId){ 
     clearInterval (timerId); 
      } 

    $(".domEleement").on("click",function(){ 

     var config ={ 
       //color starting point 
       startRED:172, 
       startGREEN:210, 
       startBLUE:247, 
       //color end point 
       endRED:255, 
       endGREEN:255, 
       endBLUE:255, 
       //element 
       element:"jsFullAccessColor", 
       //speed 
       speed:20 

      } 
      COLOR.fadeBackground(config); 

    }); 


});