Untitled

<html>
    <head>
        <title>aaa</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <style type="text/css">
            body {
                background-color: yellow;
                transition: all linear 3s;
            }
        </style>
    </head>
    <body>
        <a href="http://google.com/" id="google_link">Google</a><br />
        <a href="#" class="color-x">red</a>,
        <a href="#" class="color-x">blue</a>,
        <a href="#" class="color-x">cyan</a>,
        <a href="#" class="color-x">black</a>,
        <a href="#" class="color-x">yellow</a>,
        <script type="text/javascript">
            $("#google_link").on("click", function () {
                alert("Going to google?");

                $("#google_link").attr("href", "http://apple.com/");
            });
            setTimeout(function () {
                $("body").css("background-color", "red");
            }, 500);
            $(".color-x").on("click", function () {
                var color = $(this).html();
                $("body").css("background-color", color);
            });
        </script>
    </body>
</html>