β

jquery背景颜色悬停渐变特效

jQuery吧-Write Less, Do More 310 阅读

jquery背景颜色悬停渐变特效
jquery背景颜色悬停渐变特效
引入js代码

<script type="text/javascript" src="http://www.jqueryba.com/"images/jquery.color.js">
</script>
<script type="text/javascript">
    $(document).ready(function() {

        // first demo
        $(".first a").hover(function() {
            $(this).animate({
                backgroundColor: "#00aadd"
            },
);
        },
        function() {
            $(this).animate({
                backgroundColor: "#303030"
            },
);
        });

        // second demo
        $(".second a").hover(function() {
            $(this).animate({
                color: "#00eeff"
            },
);
        },
        function() {
            $(this).animate({
                color: "#FFFFFF"
            },
);
        });

        // third demo
        original = $('.third a').css('background-color');
        $('.third a').hover(function() {
            var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
            $(this).animate({
                'backgroundColor': col
            },
);
        },
        function() {
            $(this).animate({
                'backgroundColor': original
            },
);
        });

        // fourth demo
        $('.fourth a').hover(function() {
            var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
            $(this).animate({
                'backgroundColor': col
            },
);
        },
        function() {
            var col = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
            $(this).animate({
                'backgroundColor': col
            },
);
        });

    });
</script>

jQuery吧整理 http://www.jqueryba.com/3730.html

作者:jQuery吧-Write Less, Do More
注重前端开发
原文地址:jquery背景颜色悬停渐变特效, 感谢原作者分享。

发表评论