JQuery Effect Example

<html>

<head>
    <title></title>
    <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document)
        .ready(function()
        {
            $("#btnShow")
                .prop("disabled", true);
            var c = $(this)
                .click();
            if (c == "#btnShow")
                $("#btnShow")
                .click(function()
                {
                    $("#btnShow")
                        .prop("disabled", true);
                    $("#btnHide")
                        .prop("disabled", false);
                    $("#img1")
                        .show(2000);
                });
            else if (c == "#btnHide")
                $("#btnHide")
                .click(function()
                {
                    $("#btnShow")
                        .prop("disabled", false);
                    $("#btnHide")
                        .prop("disabled", true);
                    $("#img1")
                        .hide(2000);
                });
            else
                $("#btnToggel")
                .click(function()
                {
                    $("#btnShow")
                        .prop("disabled", true);
                    $("#btnHide")
                        .prop("disabled", true);
                    $("#img1")
                        .toggle(5000);
                });
            $("#btnFadeIn")
                .click(function()
                {
                    $("#img1")
                        .fadeIn(3000);
                });
            $("#btnFadeOut")
                .click(function()
                {
                    $("#img1")
                        .fadeOut(3000);
                });
            $("#btnFadeToggle")
                .click(function()
                {
                    $("#img1")
                        .fadeToggle(3000);
                });
            $("#btnFadeTo")
                .click(function()
                {
                    $("#img1")
                        .fadeTo(3000, 0.2);
                });
            $("#btnSlideUp")
                .click(function()
                {
                    $("#img1")
                        .slideUp(3000);
                });
            $("#btnSlideDown")
                .click(function()
                {
                    $("#img1")
                        .slideDown(3000);
                });
            $("#btnSlideToggle")
                .click(function()
                {
                    $("#img1")
                        .slideToggle(3000);
                });
        });
    </script>
    <style type="text/css">
    #img1 {
        width: 300px;
        height: 300px;
        border: 5px solid green;
    }
    </style>
</head>

<body>
    <form id="form1" runat="server">
        <div align="center">
            <input type="button" id="btnShow" value="Show" />
            <input type="button" id="btnHide" value="Hide" />
            <input type="button" id="btnToggel" value="Toggel" />
            <input type="button" id="btnFadeIn" value="FadeIn" />
            <input type="button" id="btnFadeOut" value="FadeOut" />
            <input type="button" id="btnFadeToggle" value="FadeToggle" />
            <input type="button" id="btnFadeTo" value="FadeTo" />
            <input type="button" id="btnSlideUp" value="SlideUp" />
            <input type="button" id="btnSlideDown" value="SlideDown" />
            <input type="button" id="btnSlideToggle" value="SlideToggel" />
            <br />
            <br />
            <img id="img1" src="images/mk3.jpg" />
        </div>
    </form>
</body>

</html>