jquery.color.js - 一个支持元素背景色动画改变的JQuery第三方插件

文章内容

jQuery本身是不支持背景颜色等属性支持动画的，安装jquery.color.js插件允许 jQuery.animate()支持背景颜色进行动画处理。代码如下

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="js/jquery.color.js" type="text/javascript"></script>
<style>
    div.test2
    {
        width: 100px;
        height: 100px;
        background-color: black;
    }
    .next, .prev
    {
        float: left;
        color: #3e3435;
        line-height: 24px;
        padding: 0 7px;
        margin-right: 9px;
        margin-left: 10px;
        background-color: #ececec;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        position: relative;
    }
    .prev
    {
        margin-left: 15px;
    }
    .test1 a
    {
        font-size: 11px;
        line-height: 24px;
        color: #1b1b1b;
        text-align: center;
        margin-left: 1px;
        margin-right: 1px;
        background-color: #ececec;
        border-radius: 4px;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        position: relative;
    }
</style>
  <div id="test" style="background-color: #00ffff">
      Test string</div>
    <br />
    <div class="test1">
        <a href="#">Test string</a> <a href="#">Test string</a> <a href="#">Test string</a>
        <a href="#">Test string</a> <a href="#">Test string</a> <a href="#">Test string</a>
        <a href="#">Test string</a> <a href="#">Test string</a> <a href="#">Test string</a>
        <a href="#">Test string</a>
    </div>
    <br />
    <button>
        变色</button>
    <div class="test2">
    </div>
    <br />
    <div>
        <span class="prev"><</span> <span class="next">></span>
    </div>
    <script type="text/javascript">

        var $div = $("#test");
        $div.animate({ "background-color": "#ffff00" }, 300).
				animate({ "background-color": "#ededed" }, 400);


        $('.test1 a').click(function () {
            $(this).stop().css({ background: 'none', fontWeight: 'bold', color: '#1b1b1b' }).siblings().css({ fontWeight: 'normal' }).stop().animate({ color: '#1b1b1b', backgroundColor: '#ececec' })
        })


        $('.test1 a').hover(function () {
            $(this).stop().animate({ color: '#fff', backgroundColor: '#3e3435' })

        }, function () {
            $(this).stop().animate({ color: '#1b1b1b', backgroundColor: '#ececec' })

        })


        $('button').on('click', function () {
            $('div.test2').animate({ 'background-color': 'red', 'width': 200 }, 2000, function () {
                alert('动画结束');
            });
        })

        $('.prev, .next').hover(function () {
            $(this).stop().animate({ color: '#fff', backgroundColor: '#3e3435' })
        }, function () {
            $(this).stop().animate({ color: '#3e3435', backgroundColor: '#ececec' })
        })


        $('.prev, .next').click(function () {
            $('.test1 a').stop().css({ background: 'none', fontWeight: 'bold', color: '#1b1b1b' }).siblings().css({ fontWeight: 'normal' }).stop().animate({ color: '#1b1b1b', backgroundColor: '#ececec' })
        })

		</script>