jQuery로 스팬 태그의 배경색을 희미 해집니다

StackOverflow https://stackoverflow.com/questions/734068

문제

나는 변화가 일어 났을 때 강조하기 위해 jQuery를 사용하여 스팬 태그의 배경색을 희미 해지려고 노력하고 있습니다. 클릭 핸들러 내부의 다음과 같은 코드가 진행될 것이라고 생각했지만 작동하지 않는 것 같습니다. 내가 어디로 갔는지 보여줄 수 있습니까? 고마워 Russ.

$("span").fadeOut("slow").css("background-color").val("FFFF99");

더 좋지만 이제는 스팬 태그의 배경색과 SPAN 태그의 텍스트 값을 모두 사라집니다. 나는 단지 배경색을 퇴색시키고 텍스트를 보이려고 노력하고 있습니다. 그렇게 할 수 있습니까?

도움이 되었습니까?

해결책

오, 나는 당신이 색상을 희미하게하고 싶다는 것을 몰랐습니다! 자, jQuery Color 플러그인을 확인해야합니다.

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

https://github.com/jquery/jquery-color/

jQuery Docs 사이트의 또 다른 유용한 섹션이 있습니다.

http://docs.jquery.com/release:jquery_1.2/effects#color_animations

나는 실제로 이것을 한 적이 없으므로 코드를 제공하려고하지는 않지만 색상 플러그인이 필요한 기능을 제공 할 것이라고 생각합니다.

다른 팁

그것은 할 수 있습니다 색상 애니메이션 플러그인. 그런 다음 같은 일을 할 것입니다 

$('span').animate({'backgroundColor' : '#ffff99'});

Pure JQ를 사용하여 플러그인이 없으면 배경을 페이드하지 않으면 CSS3에서이를 수행 할 수있는 영리한 (점차 향상되지는 않았지만) 방법이 있습니다.

이 함수는 다음 CSS를 통해 주어진 요소에 "Transition"속성을 적용하며 요소는 CSS가 사라지는 배경색이 제공됩니다.

이것이 파도처럼되기를 원한다면 ( "여기서 봐라!"), 반 초의 지연 후, 요소를 흰색으로 돌리기 위해 함수가 대기됩니다.

본질적으로 JQ는 요소를 하나의 색상으로 깜박인 다음 다시 흰색으로 깜박입니다. CSS3는 페이딩을 처리합니다.

//reusable function to make fading colored hints
function fadeHint(divId,color) {
    switch(color) {
        case "green":
        color = "#17A255";
        break;

        case "blue":
        color = "#1DA4ED";
        break;

        default: //if "grey" or some misspelled name (error safe).
        color = "#ACACAC";
        break;
    }

    //(This example comes from a project which used three main site colors: 
    //Green, Blue, and Grey)

    $(divId).css("-webkit-transition","all 0.6s ease")
    .css("backgroundColor","white")
    .css("-moz-transition","all 0.6s ease")
    .css("-o-transition","all 0.6s ease")
    .css("-ms-transition","all 0.6s ease")
    /* Avoiding having to use a jQ plugin. */

    .css("backgroundColor",color).delay(200).queue(function() {
        $(this).css("backgroundColor","white"); 
        $(this).dequeue(); //Prevents box from holding color with no fadeOut on second click.
    }); 
    //three distinct colors of green, grey, and blue will be set here.
}

이것은 jQuery (또는 모든 lib) 및 간단한 CSS 해킹으로 수행 할 수 있습니다.

#wrapping-div {
 position:relative;
 z-index:1;
}
#fadeout-div {
 height:100%;
 width:100%;
 background-color: #ffd700;
 position:absolute;
 top:0;
 left:0;
 z-index:-1
}

HTML :

<div id="wrapping-div">
  <p>This is some text</p>
  <p>This is some text</p>
  <p>This is some text</p>
  <div id="fadeout-div"></div>
</div>

그런 다음, 당신이해야 할 일은 다음과 같습니다.

$("#fadeout-div").fadeOut(1100);

쉬워요! 이 작업을 실제로 본다 : http://jsfiddle.net/matthewbj/jcsyp/

이 시도

    $(this).animate({backgroundColor:"green"},  100);
    $(this).animate({backgroundColor:"white" },  1000);

대답에 늦을 수 있지만 답변에 대한 직접적인 해결책입니다.

 $('span').css('background-color','#<from color>').animate({backgroundColor: '#<to color>'},{duration:4000});

단순한. jqueryui 플러그인, 타사 도구 및 모두가 필요하지 않습니다.

나는 플러그인을 사용하고 싶지 않았으므로 배경을 희미 해져서 배경을 퇴색시키는 div 클래스에 이것을 포함시켰다.

.div-to-fade {
    -webkit-transition:background 1s;
    -moz-transition:background 1s;
    -o-transition:background 1s;
    transition:background 1s
}

버튼 클릭에있는 jQuery

$('.div-to-fade').css('background', 'rgb(70, 70, 70)');
setTimeout(function(){$('.div-to-fade').css('background', '')}, 1000);

이것은 배경 밝은 회색을 채색 한 다음 원래 색상으로 다시 사라집니다. 이것이 기여하기를 바랍니다.

그렇기 때문에 스팬 태그에서 Fadeout을 호출합니다. 배경 페이드 애니메이션을 얻으려면 사용해야합니다.

$('span').animate({'backgroundColor' : '#ffff99'});

Mishac이 지적한대로. 또 다른 방법은 다음과 같은 것일 수 있습니다.

$("span").fadeTo(0.5,"slow", function () {
  $(this).css("background-color", "#FFFF99");
  $(this).fadeIn("slow");
});

위의 코드는 전체 스팬 태그의 50%로 사라진 다음 배경과 페이드 인을 변경합니다. 그것은 당신이 찾고 있던 것이 아니지만 다른 jQuery 플러그인에 의존하지 않고 데스셋 애니메이션을 만듭니다.)

최신 JQuery UI 비즈니스를 사용하면 대부분의 객체에서 배경색 변환을 수행 할 수 있습니다. 여기를 봐 : http://jqueryui.com/demos/animate/

롤오버에서 배경을 투명하게 만들기 위해 배경을 투명하게 만드는 사람은 이미지를 드러내는 데 사용하는 것과 같은 일반적인 jquery 이미지 롤오버처럼 이미지를 만들기가 더 간단하지 않습니까?

이 구문을 사용하고 싶을 것입니다.

$("span").fadeOut("slow").css("background-color", "#FFFF99");

이것은 호버로 내 목록을 고정 한 방법입니다.

CSS :

ul {background-color:#f3f3f3;}
li:hover {background-color: #e7e7e7}

jQuery :

$(document).ready(function () {
    $('li').on('touchstart', function () { $(this).css('background-color', ''); });
    $('li').on('touchend', function () { $(this).css('background-color', 'inherit'); });
});

또 다른 해결책 없이 jQuery UI https://stackoverflow.com/a/22590958/781695

//Color row background in HSL space (easier to manipulate fading)
$('span').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(){
            $('span').css('backgroundColor','hsl(0,100%,'+ii+'%)'); 
        }, dd);    
    })(i,d);
}

데모 : http://jsfiddle.net/5nb3s/3/

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top