畫廊通過jQuery淡入和淡出

Question

我的畫廊有兩個小問題（在這里： http : //jan.kusenberg.eu/test/fotografie.php ）。 我用一個朋友和互聯網上的一些幫助對其進行了編碼，但是現在我無法解決最后的問題：

1. 一開始它不會顯示圖片，我也不知道為什么。
2. 更換畫廊時，電流消退得太快，新的“閃爍”然后緩慢地消隱（應該是：舊的消隱，新的消隱）。

這是主圖庫頁面（然后包括僅從文件夾“ fotografie_1.inc.php”中繪制圖片的子頁面）后面的代碼：

<div id="frame_content">

    <?php
    if ( empty ($_GET['content']) or !$_GET['content']) { $file = 'fotografie_1.inc.php'; } else {
    $file = $_GET['content'].".inc.php";}
    if(file_exists($file)) {
        include($file);
        }   
    ?> 

</div>

<script>
function getthings(param1, param2)
        {
            $.ajax({
                url: "fotografie_1.inc.php",
                type: "GET",
                data: { chapter : param1, content : param2 },
                async: true
            }).done(function(data) {
                $("#frame_content").fadeOut("slow");
                $("#frame_content").empty();
                $("#frame_content").append(data);
                $("#frame_content").fadeIn("slow");
            });
        }
</script>

我究竟做錯了什么？

Answer 1

JS應該如下所示：

function getthings(param1, param2)
        {
            $.ajax({
                url: "fotografie_1.inc.php",
                type: "GET",
                data: { chapter : param1, content : param2 },
                async: true
            }).done(function(data) {
                $("#frame_content").fadeOut("slow",function(){
                     $("#frame_content").empty();
                     $("#frame_content").hide();
                     $("#frame_content").append(data);
                     $("#frame_content").fadeIn("slow");

                });
            });
        }

Answer 2

http://api.jquery.com/fadeout/您正在同時淡入和淡出，可能看起來很奇怪。 嘗試：

<div id="frame_content">

    <?php
    if (empty($_GET['content']) or ! $_GET['content']) {
        $file = 'fotografie_1.inc.php';
    } else {
        $file = $_GET['content'] . ".inc.php";
    }
    if (file_exists($file)) {
        include($file);
    }
    ?> 

</div>

<script>
    function getthings(param1, param2) {
        $.ajax({
            url: "fotografie_1.inc.php",
            type: "GET",
            data: {chapter: param1, content: param2},
            async: true
        }).done(function (data) {
            $("#frame_content").fadeOut("slow", function () { //Callback for when the fadeout is done
                $("#frame_content").empty();
                $("#frame_content").append(data);
                $("#frame_content").fadeIn("slow");
            });
        });
    }
    $(document).ready(function () {
        getthings(1, 'fotographie_1'); // or whatever default is sensible
    });
</script>