Independent attribute animation with jQuery

by Luiz Silva

HTML

<button id="x">start x</button> <button id="y">start y</button> <button id="r">reset</button>
<div>Bloco</div>

CSS

div {
    position: absolute;
    left: 20px;
    top: 50px;
    width: 70px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    background-color: #ddd;
}

JavaScript

$('#x').click(function() {
    if ($(this).text().indexOf('start') >= 0) {
        $('div').animate({
            left: '+=200px'
        }, {
            queue: 'x',
            duration: 5000
        }).dequeue('x');
        $(this).text('stop x');
    } else {
        $('div').stop('x');
        $(this).text('start x');
    }
});

$('#y').click(function() {
    if ($(this).text().indexOf('start') >= 0) {
        $('div').animate({
            top: '+=200px'
        }, {
            queue: 'y',
            duration: 5000
        }).dequeue('y');
        $(this).text('stop y');
    } else {
        $('div').stop('y');
        $(this).text('start y');
    }
});

$('#r').click(function() {
    $('div').stop('y').stop('x').css({
        left: '20px',
        top: '50px'
    });
    $('#y').text('start y');
    $('#x').text('start x');
});