使用JQuery淡入範圍標記的背景顏色

我試圖使用jQuery淡化範圍標記的背景顏色以強調發生更改時的情況。我正在考慮代碼將在click處理程序中像下面的內容，但我似乎無法得到它的工作。你能告訴我我出錯的地方嗎？謝謝拉斯。使用JQuery淡入範圍標記的背景顏色

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

這是更好的，但是現在它消失span標記的兩種背景色和太跨度標籤的文本值。我試圖淡化背景顏色並讓文字可見。可以這樣做嗎？

來源

2009-04-09 Russ Clark

哦，我沒有意識到你想淡出顏色！ OK，所以你需要檢查jQuery的顏色插件：

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

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

而這裏的jQuery的文檔場的另一個有用的部分：

http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

我我從來沒有真正做到這一點，所以我不會嘗試給你代碼，但我想象的顏色插件會給你的功能需要。

來源

2009-04-09 13:05:24

這很好，感謝您的幫助！ – 2009-04-15 13:14:11

此鏈接不再有效 - http://plugins.jquery.com/project/color – 2013-02-06 06:41:15

你會想用這個語法：

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

來源

2009-04-09 12:52:29

它可與color animation plugin來完成。然後你會做類似

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

來源

2009-04-09 13:04:45 mishac

如果你已經有jQuery UI，你已經準備好動畫顏色了。 `注意：jQuery UI項目通過允許一些非數字樣式（如顏色）進行動畫來擴展.animate（）方法。該項目還包括通過CSS類指定動畫而不是單獨屬性的機制。http://api.jquery.com/animate/ – styfle 2013-02-06 23:37:12

這就是爲什麼您在span標籤上調用fadeOut的原因。要獲得背景褪色動畫，您應該使用：

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

正如mishac指出的那樣。另一種可能是這樣的：

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

上面的代碼會淡出到50％，整個跨度標籤，然後改變背景和淡入。它是不是你要找的人，但沒有其他的jQuery插件根據創建decet動畫;）

來源

2009-12-21 17:23:27

試試這個

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

來源

2010-08-13 13:05:37 Kev

這不適用於單獨的jQuery。 – UpTheCreek 2010-12-18 15:45:57

這需要jQueryUI庫才能工作。 – farina 2011-04-15 17:28:10

最新的jQuery UI的業務可以讓你做背景顏色上變換大多數物體。在這裏看到：http://jqueryui.com/demos/animate/

至於這個傢伙詢問製作背景透明上翻車，以顯露影像豈不是更簡單的構建它像一個正常的jQuery圖像翻車喜歡的人使用開關的那些導航圖像？

來源

2011-01-07 08:24:59 mattelliottIT

如果使用純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. 
}

來源

2012-02-17 19:14:26

優秀！從更多的JS膨脹中拯救了我。 – radicand 2012-04-13 08:00:30

可能遲到回答，但直接解決您的答案。

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

簡單。無需jqueryUI插件，第三方工具和所有。

來源

2012-04-23 15:14:56

這可以使用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);

易Peasy！看到這個動作：http://jsfiddle.net/matthewbj/jcSYp/

來源

2012-05-24 18:50:24 honyovk

這是我如何修復它爲我的清單，懸停：

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'); }); 
});

來源

2012-09-10 10:50:30 Zymotik

我沒有想使用一個插件因此，淡入淡出的背景我包括這個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);

這將色彩背景淺灰色，然後褪色回到原稿顏色希望這有助於

來源

2014-02-07 08:56:10

另一種解決方案而不 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/

來源

2014-03-23 12:37:27 Medorator

使用JQuery淡入範圍標記的背景顏色

回答

相關問題