jquery动画效果和rgb应用什么的

var rgb = $b.css("background-color");
    console.log(rgb);
    var list = new Array();
    var s = rgb.replace(/rgb\((\d{1,3})\,\s*(\d{1,3})\,\s*(\d{1,3})\)/, "$1+$2+$3");
    console.log(s);
    list = s.split('+');
    console.log(list);
    for(var i = 0; i < list.length; i++)
    {
        list[i]=parseInt(list[i]) + 10;
    }
    console.log(list);
    $b.css("background-color", "rgb("+list[0]+","+list[1]+","+list[2]+')');

上面是根据正则表达式从css中的background-color提取rgb

并且改变rgb

 

 

jQuery 自带的animate的高级用法

一般是直接用花括号写一些要改变的东西

$b.animate(
        {width: "+=80px"}, 
        {duration:1000, 
        step: function(){
            $(this).css("height", function(){
                return parseInt($(this).css("height"))+1;
            });
        }
    }
    )

现在还没什么意思,待更新

 

9/18

使一个id为b的元素背景变红

var $b = $('#b');

$b.animate(
    {width: "+=0px"}, //不知到为什么没这行代码没效果
    {duration:1000, 
    step: function(){
        var rgb = $b.css("background-color");
        console.log(rgb);
        var list = new Array();
        var s = rgb.replace(/rgb\((\d{1,3})\,\s*(\d{1,3})\,\s*(\d{1,3})\)/, "$1+$2+$3");
        console.log(s);
        list = s.split('+');
        console.log(list);
        list[0]=parseInt(list[0]) + 4;
        console.log(list);
        $b.css("background-color", "rgb("+list[0]+","+list[1]+","+list[2]+')');
    }
}
)

 

posted @ 2018-09-11 23:02  托马斯blue_cat  阅读(270)  评论(0编辑  收藏  举报