Click to animate position | Animações em click | jQuery

Categoria: jquery em 10/08/2010 | Apenas um =/

Dando início a nossa série de snippets.

jQuery

$(document).ready(function() {
    //evento onclick do a.next
    $('.next').click(function(e) {
        //movimento a div#foobar para a esquerda 1000px
        //left: é a propriedade left do css
        //1000 é o tempo em milisegundos = 1seg
        $('#foobar').animate({left: '-=1000px'}, 200);
        //e é o evento
        //preventDefault == return false | evita que siga o link ou a ação.
        e.preventDefault();
    });
    $('.previous').click(function(e) {
        //movimento a div#foobar para a esquerda 1000px
        $('#foobar').animate({left: '+=1000px'}, 200);
        e.preventDefault();
    });
})

HTML

<body>
    <div id="foobar">
        Coisas
    </div>

    <a href="" class="previous">Esquerda</a> - <a href="" class="next">Direita</a>
</body>

CSS

#foobar {
    background: black;
    border: 2px solid blue;
    width: 600px;
    height: 150px;
    /* necessário */;
    position: relative;
}

Demo

Alguém marcou to “Click to animate position | Animações em click | jQuery”

Tweets that mention Click to animate position | Animações em click | jQuery | Ruan Carlos -- Topsy.com disse:

10 de agosto de 2010 às 17:55

[...] This post was mentioned on Twitter by Ruan Carlos, jQuery Watcher. jQuery Watcher said: via @ruanltbg Click to animate position | Animações em click | jQuery | Ruan Carlos: http://bit.ly/9yePqx #blogpost [...]

Responder