问用圆形彩色动画填充div

EN

// You can modify this if you want
var START_RADIUS = 25;
$("#someText").click(function (e) {
    // Get the width and the height
    var width = $(this).width(),
        height = $(this).height();
    // Get the diagonal (this is what our circle needs to expand to)
    var diag = Math.ceil(Math.sqrt(width * width + height * height)) * 2;
    // Get the mouse coordinates
    var pageX = e.pageX,
        pageY = e.pageY;
    // Create a circle
    $('<div class="circle">').appendTo("#someText").css({
        width: START_RADIUS * 2,
        height: START_RADIUS * 2,
        "border-radius": START_RADIUS,
        top: pageY - START_RADIUS,
        left: pageX - START_RADIUS,
        "background-color": $("#newColor").val()
    }).animate({
        width: diag,
        height: diag
    }, {
        step: function (now, fx) {
            // This occurs every step of the animation
            // Modify the radius so that it grows along with the width and height
            if (fx.prop === "height") return;
            $(this)
                .css("top", pageY - START_RADIUS - now / 2)
                .css("left", pageX - START_RADIUS - now / 2)
                .css("border-radius", now / 2);
        },
        easing: "linear",
        duration: 2000, // The number of milis to grow completely
        done: function () {
            // Remove the circle and change the background color
            $("#someText").css("background-color", $(this).css("background-color")).css("z-index", "");
            $(this).remove();
        }
    });
    $("#someText").css("z-index", -3);
});
// So that when we click on the color input, it doesn't create a circle
$("#newColor").click(function(e) { e.stopPropagation(); });