---

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>МаксимовПР№23 — Задание 23_7</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
        #elem {
            border: 2px solid #333;
            background-color: rgb(253, 101, 101);
            width: 200px;
            height: 200px;
            padding: 10px;
            text-align: center;
            line-height: 200px;
            font-size: 20px;
            color: #fff;
            margin-top: 20px;
        }
        button {
            margin-right: 10px;
            padding: 10px 15px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $("#start").click(function () {
                $("#elem")
                    .animate({ width: "100px", height: "100px", opacity: 0.5 }, 1000)
                    .animate({ width: "200px", height: "200px", opacity: 1 }, 1000)
                    .slideUp(1000, function () {
                        $("#start").text("Показать снова");
                        setTimeout(function () {
                            $("#elem").slideDown(1000, function () {
                                $("#start").text("Запустить эффект");
                            });
                        }, 500);
                    });
            });

            $("#reset").click(function () {
                $("#elem")
                    .stop(true, true)
                    .css({ width: "200px", height: "200px", opacity: 1 })
                    .show();
                $("#start").text("Запустить эффект");
            });
        });
    </script>
</head>
<body>
    <h2>Задание 23_7. Собственный эффект</h2>
    <button id="start">Запустить эффект</button>
    <button id="reset">Сбросить</button>
    <div id="elem">Анимированный блок</div>
</body>
</html>