<style type="text/css">
        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            position: relative;
            width: 200px;
            height: 200px;
            background-color: red;
            filter: alpha(opacity:30);
            opacity: 0.3;
            margin: 0 auto;
        }

        /*span {
            position: absolute;
            width: 20px;
            height: 50px;
            background-color: blue;
            left: 200px;
            top: 75px;
            font-weight: bold;
            cursor: pointer;
        }*/
    </style>

    <script>
        window.onload = function () {
            var odiv = document.getElementById('div1');
            odiv.onmouseover = function () {
                startMove(100);
            }

            odiv.onmouseout = function () {
                startMove(30);
            }
        }
        var timer = null;
        var alpha = 30;
        function startMove(iTarget) {
            clearInterval(timer);
            timer = setInterval(function () {
                var odiv = document.getElementById('div1');
                var speed = 0;
                if (alpha > iTarget) {
                    speed = -10;
                } else {
                    speed = 10;
                }

                if (alpha == iTarget) {
                    clearInterval(timer);
                }
                else {
                    alpha += speed;
                    odiv.style.opacity = alpha / 100;
                }

            }, 30);
        }

    </script>