animation bug???

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
<div class="source"></div>

<div class="target"></div>

CSS

.source
{
    width: 50px;
    height: 50px;
    background: green;
    position: absolute;
    top: 50px;
    left: 50px;
}

.target
{
    width: 50px;
    height: 50px;
    background: #ccc;
    position: absolute;
    top: 50px;
    /*left: 150px;*/
}

JavaScript

$(function()
{
    $('.target').css({ left: '150px' });
    $(".source").draggable({
        helper: 'clone'
    });

    $(".target").droppable({
        accept: ".source",
        drop: function () {
            //alert("Drop");
        },
        over: function() {
            $('.target').css({ backgroundColor: 'red' });
        },
        out: function() {
            $('.target').css({ backgroundColor: '#ccc' });
        }
    });

});