jquery를 사용하여 배경색을 어떻게 페이드 인/아웃합니까?

jquery를 사용하여 배경색을 어떻게 페이드 인/아웃합니까?

jQuery로 텍스트 내용을 페이드하려면 어떻게 해야 합니까?

핵심은 메시지에 사용자의 주의를 집중시키는 것입니다.

요소의 배경색을 구체적으로 애니메이션화하고 싶다면 jQueryUI framework를 포함시킬 필요가 있다고 생각합니다.그러면 다음을 수행할 수 있습니다.

$('#myElement').animate({backgroundColor: '#FF0000'}, 'slow');

jQueryUI에는 당신에게도 유용할 수 있는 몇 가지 효과가 내장되어 있습니다.

http://jqueryui.com/demos/effect/

이와 같은 정확한 기능(메시지를 강조하기 위해 3초간 빛이 나옴)은 jQuery UI에서 하이라이트 효과로 구현됩니다.

https://api.jqueryui.com/highlight-effect/

색상 및 기간은 가변적입니다.

jQuery로 어떻게 하느냐가 문제였지만, 간단한 CSS와 약간의 jQuery로 같은 효과를 얻을 수 있습니다.

예를 들어, 'box' 클래스를 가진 div가 있는 경우 다음 CSS를 추가합니다.

.box {
    background-color: black;
    -webkit-transition: background 0.5s linear;
    -moz-transition: background 0.5s linear;
    -ms-transition: background 0.5s linear;
    -o-transition: background 0.5s linear;
    transition: background 0.5s linear;
}

그 다음에 사용합니다.AddClassbox highlighted'와 같은 다른 배경색을 가진 다른 클래스를 다음 CSS와 함께 추가하는 기능:

.box.highlighted {
    background-color: white;
}

다음은 코드 펜입니다: https://codepen.io/anon/pen/baaLYB

일반적으로 .animate() 메서드를 사용하여 임의 CSS 속성을 조작할 수 있지만 배경색의 경우 색상 플러그인을 사용해야 합니다.일단 이 플러그인을 포함하면 다른 사람들이 표시한 것과 같은 것을 사용할 수 있습니다.$('div').animate({backgroundColor: '#f00'})색을 바꾸는 거죠.

다른 사람들이 쓴 것처럼, 이 중 일부는 jQuery UI 라이브러리를 사용하여 수행할 수 있습니다.

jQuery만 사용(UI 라이브러리/플러그인 없음).jQuery도 쉽게 제거할 수 있습니다.

//Color row background in HSL space (easier to manipulate fading)
$('tr').eq(1).css('backgroundColor','hsl(0,100%,50%');

var d = 1000;
for(var i=50; i<=100; i=i+0.1){ //i represents the lightness
    d  += 10;
    (function(ii,dd){
        setTimeout(function(){
            $('tr').eq(1).css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

데모 : http://jsfiddle.net/5NB3s/2/

• SetTimeout은 밝기를 50%에서 100%로 증가시켜 기본적으로 배경을 흰색으로 만듭니다(색상에 따라 임의의 값을 선택할 수 있음).
• SetTimeout은 루프(이유)에서 제대로 작동하기 위해 익명 함수로 감싸집니다.

브라우저 지원에 따라 CSS 애니메이션을 사용할 수 있습니다.브라우저 지원은 CSS 애니메이션용 IE10 이상입니다.이것은 좋으므로 작은 이스터 에그라면 jquery UI 의존성을 추가할 필요가 없습니다.만약 그것이 당신의 사이트(IE9 이하에 필요한 경우)에 필수적인 것이라면 jquery UI 솔루션을 사용하세요.

.your-animation {
    background-color: #fff !important;
    -webkit-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
//You have to add the vendor prefix versions for it to work in Firefox, Safari, and Opera.
@-webkit-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-moz-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-moz-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-ms-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-ms-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
-o-animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@-o-keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}
animation: your-animation-name 1s ease 0s 1 alternate !important;
}
@keyframes your-animation-name {
    from { background-color: #5EB4FE;}
    to {background-color: #fff;}
}

다음으로 다음을 추가하는 jQuery 클릭 이벤트를 만듭니다.your-animation로, 한색으로 .로경을여는로한:로s는여서s을른o경 class:

$(".some-button").click(function(e){
    $(".place-to-add-class").addClass("your-animation");
});

저는 이와 유사한 것을 달성하기 위해 초간단 jQuery 플러그인을 작성했습니다.저는 정말 가벼운 것(최소 732바이트)을 원했기 때문에 큰 플러그인이나 UI를 포함하는 것은 불가능했습니다.아직은 가장자리가 조금 거칠어서 피드백을 환영합니다.

플러그인은 여기 https://gist.github.com/4569265 에서 확인할 수 있습니다.

후을 하면 한 에 를 하여 를 은 입니다 일 을 입니다 일 은 을 하면 하여 에 를 setTimeout플러그인을 발사하여 원래의 배경색으로 바뀝니다.

간단한 자바스크립트만 사용하여 두 가지 색상 사이에서 페이드하기:

function Blend(a, b, alpha) {
  var aa = [
        parseInt('0x' + a.substring(1, 3)), 
        parseInt('0x' + a.substring(3, 5)), 
        parseInt('0x' + a.substring(5, 7))
    ];

  var bb = [
        parseInt('0x' + b.substring(1, 3)), 
        parseInt('0x' + b.substring(3, 5)), 
        parseInt('0x' + b.substring(5, 7))
    ];

  r = '0' + Math.round(aa[0] + (bb[0] - aa[0])*alpha).toString(16);
  g = '0' + Math.round(aa[1] + (bb[1] - aa[1])*alpha).toString(16);
  b = '0' + Math.round(aa[2] + (bb[2] - aa[2])*alpha).toString(16);

  return '#'
        + r.substring(r.length - 2)
        + g.substring(g.length - 2)
        + b.substring(b.length - 2);
}

function fadeText(cl1, cl2, elm){
  var t = [];
  var steps = 100;
  var delay = 3000;

  for (var i = 0; i < steps; i++) {
    (function(j) {
         t[j] = setTimeout(function() {
          var a  = j/steps;
          var color = Blend(cl1,cl2,a);
          elm.style.color = color;
         }, j*delay/steps);
    })(i);
  }

  return t;
}

var cl1 = "#ffffff";
var cl2 = "#c00000";
var elm = document.getElementById("note");
T  = fadeText(cl1,cl2,elm);

출처 : http://www.pagecolumn.com/javascript/fade_text.htm

jQuery나 다른 라이브러리 없이 javascript가 흰색으로 바뀝니다.

<div id="x" style="background-color:rgb(255,255,105)">hello world</div>
<script type="text/javascript">
var gEvent=setInterval("toWhite();", 100);
function toWhite(){
    var obj=document.getElementById("x");
    var unBlue=10+parseInt(obj.style.backgroundColor.split(",")[2].replace(/\D/g,""));
    if(unBlue>245) unBlue=255;
    if(unBlue<256) obj.style.backgroundColor="rgb(255,255,"+unBlue+")";
    else clearInterval(gEvent)
}
</script>

인쇄에서 노란색은 마이너스 파란색이므로 255 미만의 세 번째 rgb 요소(파란색)부터 노란색 강조 표시로 시작합니다.에는.10+을 설정할 때var unBlue value에 255할다를스지는5t를lee5ese스ss

언급URL : https://stackoverflow.com/questions/967815/how-do-you-fade-in-out-a-background-color-using-jquery