顏色褪色jQuery沒有顏色插件

我環顧四周學習如何使用jquery淡出背景顏色，但所有的答案導致jquery color plugin，我不想使用。我想要一個純粹的jQuery代碼來做到這一點，但似乎無法找到它。而且我的工作場所非常不願意爲他們的網站使用插件，所以我必須使用純jQuery。顏色褪色jQuery沒有顏色插件

我不是在jQuery的專家，但是這是我想出了，我認爲這是不是解決辦法：

$('#fade').css('background-color', '#2CAEA8').animate({'opacity': 0});

我只想背景從任何褪色成白色。請有人給我指路嗎？謝謝。

來源

2011-04-02 Shaoz

您的工作場所缺少一點。 https://raw.github.com/jquery/jquery-color/master/jquery.color.js既小又輕，不要重新發明輪子。 – 2012-07-18 05:13:13

爲什麼不寫的代碼自己？

你知道，FFFFFF是白色的，這可以解釋爲RGB 255,255,255

例如，你有一個RGB值100 100 100（從十六進制轉換），然後你只要運行一個循環，並增加這些值直到達到255，並在每次迭代時將背景顏色設置爲匹配。

來源

2011-04-02 11:37:36

爲此解決方案發布了一個示例:) – 2015-11-06 14:13:23

的Html

<html> 
    <body> 
     <div id="fade"> 
      some text goes here 
     </div> 
    </body> 
</html>

jQuery的

$(document).ready(function() { 

    $('#fade').css('backgroundColor', $('#fade').css('backgroundColor')).animate({ 
     backgroundColor: '#ffffff' 
    }, 5000); 

});

CSS

#fade{ 
    background:#ff0; 
}

來源

2011-04-02 11:36:03

'.animate（）'不適用於非數值的值。 – 2011-04-02 11:51:24

這不完全是因爲如果你使用ajax基礎jQuery腳本，你可能沒有任何問題，Box9。 – 2011-04-03 15:31:16

@ Box9，@Jack Billy：我無法使用jquery-ui或任何插件來製作背景顏色效果。我的公司希望它是純粹的jquery，那麼我該怎麼做呢？ – Shaoz 2011-04-04 08:17:57

我想我已經找到你的問題答案！這是一個live demo也可以查看下面的代碼 -

HTML -

<html> 
    <head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script> 
    </head> 
    <body> 
     <div id="fade"> 
      My Friend Shaoz! 
     </div> 
    </body> 
</html>

CSS -

div#fade 
{ 
color: #333; 
background: #ddd; 
padding: 5px 5px; 
font-family: segoe ui; 
font-size: 12px; 
font-weight: bold; 
border: 2px solid #333; 
}

jQuery的 -

$(document).ready(function(){ 
    var fadeobjid = 'fade'; 
    var fadetinobg = '#fff'; 
    var fadeouttobg = '#ddd'; 
    var fadeintotextcolor = '#000'; 
    var fadeouttotextcolor = '#333'; 
    var fadeinanimatespeed = '300'; 
    var fadeoutanimatespeed = '250'; 

    $('#' + fadeobjid).mouseover(function() { 
     $(this).animate({ 
      'backgroundColor' : fadetinobg, 
      'color' : fadeintotextcolor 
     }, fadeinanimatespeed, 'linear', function() { }); 
    }); 
    $('#' + fadeobjid).mouseout(function() { 
     $(this).animate({ 
      'backgroundColor' : fadeouttobg, 
      'color' : fadeouttotextcolor 
     }, fadeoutanimatespeed, 'linear', function() { }); 
    }); 
});

事情是你需要jQuery-UI來做到這一點。這就是你需要的全部！

希望這會幫助你！

來源

2011-04-03 15:52:28

我的公司不想使用jquery-ui，因爲它對於我們正在構建的站點來說非常沉重。他們希望它是原始的jquery，即沒有插件，沒有jquery-ui ...有沒有辦法？ – Shaoz 2011-04-04 08:15:01

對不起Shaoz，沒有辦法做到這一點，而不是使用Flash。 – 2011-04-04 11:17:40

「黃色淡出」的簡單/原始腳本，沒有插件，除了jquery本身。只需在計時器中用rgb（255,255，highlightcolor）設置背景：

<script> 

    $(document).ready(function() { 
     yellowFadeout(); 
    }); 

    function yellowFadeout() { 
     if (typeof (yellowFadeout.timer) == "undefined") 
      yellowFadeout.timer = setInterval(yellowFadeout, 50); 
     if (typeof (yellowFadeout.highlightColor) == "undefined") 
      yellowFadeout.highlightColor = 0; 
     $(".highlight").css('background', 'rgb(255,255,' + yellowFadeout.highlightColor + ')'); 
     yellowFadeout.highlightColor += 10; 
     if (yellowFadeout.highlightColor >= 255) { 
      $(".highlight").css('background',''); 
      clearInterval(yellowFadeout.timer); 
     } 
    } 
</script>

來源

2015-11-06 14:11:50

顏色褪色jQuery沒有顏色插件

回答

相關問題