• jQuery backgroundColor的animate效果


    我们知道jQuery几乎是我们最常用的javascript库了,不过尽管他自己本身拥有大量的特效,但却仍然缺少一些动画效果。比如说,颜色、背景颜色的变换。

    animate一般只支持大小,位置,透明度的变化

    今天看到新浪微博在微博发布框无内容时,点击发布按钮,发布框会有背景颜色闪烁,产生警示的效果,友好的用户体验就想模仿一下。 
    于是又纠结了一天。。。 

    刚开始我用jQuery的fadeIn和fadeOut,很快的就能达到效果。但是我发现,微博那里是逐渐地改变背景颜色实现的,而fadeIn跟fadeOut是通过逐渐改变alpha即透明度实现。所以开始纠结中。。 
    然后,写了段代码 

    var color = function(){};
    color.fadeIn = function(a){
    if(a>=255){
    $('#input').css('backgroundColor', 'gba('+a+','+a+','+a+')');
    a++;
    setTimeout(color.fadeIn(a), 20);
    } else {
    setTimeout(color.fadeOut(a), 20);
    }
    }
    color.fadeOut = function(a){
    // 此处省略
    }
    


    简单说,我是想实现,比如rgb(a, a, a)递增至rgb(255, 255, 255) 再递减至 rgb(a, a, a) 
    但是效果差很多,一测试颜色没变化。 
    于是,打了一段测试代码 

    setTimeout($('#input').css('backgroundColor', 'red'), 1000);
    setTimeout($('#input').css('backgroundColor', 'black'), 2000);
    


    打开浏览器,直接就是黑色,并没有从红色跳到黑色。 
    。。。 
    后来 找到jQuery的一个插件叫jquery.color.js里面重写了backgroundColor,color,boderColor等属性颜色的animate效果 
    于是问题可以这样解决 : 
    $('#input').animate({backgroundColor:'red'}, 1000); 
    这样就可以从原始的背景颜色逐渐变成红色的效果。 
    很神奇啊,开始研究jquery.color.js的源代码。 
    先附上用jquery.color.js实现的颜色闪烁的警示效果代码 

    $('.publish a').click(function(){
    var content = $('textarea').val();
    if(content==""){
    $('#input').stop(false, true).animate({backgroundColor:'#FF9966'}, 250)
    .animate({backgroundColor:'#FFF'}, 200)
    .animate({backgroundColor:'#FF9966'}, 250)
    .animate({backgroundColor:'#FFF'}, 200);
    } else {
    $.post(url, {input:content},function(data){
    });
    }
    });
  • 相关阅读:
    OCS 2007 R2单机测试虚拟环境的搭建(windows server 2008 R2 x64)
    Linq的概念解析
    WCF Data Service与net.tcp承载分析
    codeplex上20个有意思的WPF程序
    各种SmartPhone上的跨平台开源框架的总结
    新开发Apple Store上软件的实施步骤
    VSTO应用程序中加入键盘钩子
    绝非偶然 苹果iPhone领先5年背后的迷思 【推荐】
    Windows上安装Mac OS虚拟机
    Visual Studio 远程调试的步骤
  • 原文地址:https://www.cnblogs.com/eric-qin/p/4059585.html
Copyright © 2020-2023  润新知