颜色褪色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没有颜色插件

回答

相关问题