[laimas]

Почему при добавления класса circle moveFunction() продолжает анимироватся и почему смещение дивов выходит такое кривое ?

Ну во-первых метод .hasClass() кроме true/false ничего не возвращает, даже если элементов не будет этот метод вернет false. Поэтому строгая проверка !== true это лишнее, достаточно if (!$('#field > div').hasClass('circle')).

Во-вторых метод проверяется при запуске анимации, а что там кнопка щелкнулась анимация не подозревает, а вы ее не прекращаете. Нужно либо так:

$('#button').on('click', function() {
      newDiv.css({})
            .removeClass('circle')
            .stop(); //остановили текущие анимации объектов
});

Либо, как говорилось ранее, можно в каждом шаге анимации проверять некое состояние.

Сами анимации можно записать так

newDiv.animate({left: "+=10%", }, 1000)
      .animate({left: "-=10%" }, 2000, moveForward );

Криво это "дергает"? О плавности анимации почитать можно, например http://easings.net/ru.

как быть с анимацией дивов по кругу ?

Задать таковую - сдвигаем вправо, по ее окончании вниз, по ее окончании влево и т.д.

newDiv.animate({left: "+=10%", }, 1000)
        .animate({top: "+=10%", }, 1000)
        .animate({left: "-=10%" }, 1000)
        .animate({top: "-=10%", }, 1000, moveForward );

Но опять таки, пропишите так как я сказал, пощелкайте.... есть странности да? А все почему? Нет логики управления этим хозяйством.