jquery - タイムアウト後に div をアニメーション化したい

Question

これがフィドルです：http://jsfiddle.net/e5ana/9/

5 つのシーンがあり、既定のシーンがページと共に読み込まれます。マップのピンにマウスを合わせると、シーンが変わります。実際のサイトでは、黒い領域が余分なシーンを隠しています。

シーンの 1 つのコードを次に示します。

    $("a.dt").mouseenter(function(){
    $(".town").filter(':not(:animated)').animate({
    bottom: '0px'
  }, 500);
    $("#dt").animate({
    bottom: '126px'
  }, 500);
});

私が立ち往生しているところは...

10 秒経過してもピンが動かない場合は、表示されているシーンをアニメーションで下に動かし、デフォルトのシーン (id="dt") をアニメーションで上に動かします。

各 mouseenter 関数にタイムアウト コードを追加したところ、これに近づきましたが、デフォルトのシーンがアニメーション化されて動かなくなったようです。つまり、別のピンでの mouseenter は、「町」のクラスを持っているにもかかわらず、デフォルト シーンを下げることができませんでした。

私が試しているタイムアウトコードは次のとおりです。

var t;
var del = 10000; //Ms delay 
    $(document).mousemove(function(){
    clearTimeout(t);
    var t = setTimeout(function(){
        //If the mouse is not moved
        $(".town").animate({
            bottom: '0px'
        }, 500);
        $("#dt").animate({
            bottom: '126px'
        }, 500);
    }, del);
});

私は何が欠けていますか？

=====================

以下でコメントしたように、重複するグローバル「var t」を削除すると、これが機能しました。ありがとう！

デフォルトのシーンが非表示の場合にのみ、コードを実行しようとしています。これは、既定のシーンが表示されている場合、コードが実行され、そのシーンがアニメーション化され、再び元に戻るためです。

これが私が試していることです...

if ($('#dt').css('bottom') == '0px') {
var t;
var del = 10000; //Ms delay 
    $(document).mousemove(function(){
    clearTimeout(t);
    t = setTimeout(function(){
        //If the mouse is not moved
        $(".town").animate({
            bottom: '0px'
        }, 500);
        $("#dt").animate({
            bottom: '126px'
        }, 500);
    }, del);
});
}

しかし、うまくいきません。スクリプト エラーはスローされず、シーンには何も起こりません。

http://jsfiddle.net/webguy262/e5ana/18/で更新されたフィドル