jquery - コンテンツに合わせて iframe のサイズを変更し、jquery を使用する

Question

次のコードを使用して、jquery を使用して動的に iframe のサイズを変更しています。HTML ページはその中に読み込まれ、すべての高さが異なります。

問題: リンクがクリックされると、iframe の高さが設定されます。そのため、2 番目のリンクがヒットすると、iframe は最初に前の html の高さを使用し、次に現在のコンテンツに合わせて縮小します。したがって、リンクがクリックされるたびに関数を「リセット」する必要があると思います。どうやってやるの？

PS: このhttp://jsfiddle.net/UWqSb/3/では動作しません(縮小します)が、私のページではコンテンツが読み込まれ、正しくアニメーション化されます。

iframe を動的にサイズ変更してアニメーション化する

$("#targetIframe").load(function() {
    $("#targetIframe").animate({ height:( $("#targetIframe").contents().find("body").height())  },500);
});

jqueryを使用してdivコンテナをアニメーション化し、ボタンがクリックされたときにdivを閉じます

$("#targetIframe").ready(function() {
        // cache elements
        var $targetDiv = $("#targetContent"),
            $iframe = $targetDiv.find("#targetIframe"),
            $close = $targetDiv.find("#myClose");

        // bind click events to first link and close button
        $(".iframe").on("click", function (e) {
            e.preventDefault(); 
            $iframe.attr({
                "src": this.href // add the content to iframe before showing
            }).parent($targetDiv).slideDown(500, function () { $('html,body').animate({scrollTop:$("#portfolio").offset().top}, 500); //show div
                $close.fadeIn(200).on("click", function () { 
                    $(this).fadeOut(100, function () { // fade out close button
                        $targetDiv.slideUp(500, function () { // hid div by sliding it up
                            //$iframe.removeAttr("src"); // remove after closing the box
                        }); // slideUp
                    }); // close fadeOut                
                }); // on click myClose
            }); // slideDown
        }); // on click link
    }); // ready