jquery-animate - jQuery animate は 1 つのイベントで動作しますが、2 番目のイベントが追加されると動作しません

Question

jsFiddle - http://jsfiddle.net/ZEewV/

北のイベントを使用する場合、アニメーションはオブジェクトで動作します。2番目のアニメーションを追加すると、2つの機能のどちらも機能しません。理由が分からないようです。どんな助けでも大歓迎です！ありがとうございました！

$("#north").click(function () {
    $(".char").animate({
        top: '-=10px'
    }, 500);
});

$("#south").click(functon() {
    $(".char").animate({
        top: '+=10px'
    }, 500);
});

Answer 1

2 番目の関数にタイプミスがあります。functionそれは「機能」修正ではなく、それを読むべきであり、それはうまくいくでしょう。

Answer 2

「関数」のつづりを「関数」と間違えました。

Answer 3

試す

$("#north").click(function () {
    $(".char").animate({
        top: ($(this).position().top - 10) + "px"
    }, 500);
});

$("#south").click(function() {
    $(".char").animate({
        top: ($(this).position().top + 10) + "px"
    }, 500);
});