JQuery: Movendo um objeto por todos os lados da tela

Este post foi criado em resposta ao comentário do Marcio, deixado neste link.

Os comentários estão no próprio script. Para um bom entendimento, aprenda sobre jQuery animate().

<script type="text/javascript">
    $(function() {
        $("#btnStart").click(function(){
            // largura da tela
            var larguraTela = $(window).width();
            // altura da tela
            var alturaTela  = $(document).height();
            // largura do quadrado + borda direita e esquerda
            var larguraElem = 180+2; // 2 refere-se a borda
            // altura do quadrado + borda superior e inferior
            var alturaElem  = 80+2; // 2 refere-se a borda
 
            $("#elemento").html("para esquerda...").animate({
                // move para direita
                marginLeft: (larguraTela - larguraElem)+"px"
            },
            2000,
            function() {
                $(this).html("descendo...").animate({
                    // move para baixo
                    marginTop: (alturaTela - alturaElem)+"px"
                },
                2000,
                function(){
                    $(this).html("direita vou ver...").animate({
                        // move para esquerda
                        marginLeft: "0px"
                    },
                    2000,
                    function(){
                        $(this).html("subindo...").animate({
                            // move para cima
                            marginTop: "0px"
                        },
                        2000,
                        function(){
                            $(this).html("CHEGAMOS!!!");
                        });
                    });
                });
            });
        });
    });
</script>

<style>
    body{ font-family: arial; }
    #elemento{ position: absolute; top: 0; left: 0; background-color: #FF0000; color: #FFF; }
    #btnStart{ margin-top: 80px; }
</style>

<input type="button" id="btnStart" value="START">
<div id="elemento" style="border:1px solid #000; width:180px; height:80px;"></div>

Clique aqui para ver demonstração.

Deixe um comentário Cancelar resposta