0

これはこの投稿とほぼ同じ問題です：divをオフスクリーンにスライドさせ、ajax呼び出しでコンテンツを追加し、divをオンスクリーンにスライドさせます

しかし、私はアニメーションを持つことができません。私のdiv#sectionが持っているからだと思いますwidth:100%。

これは私のhtmlコードです： 

<div class="coda-slider" id="slider-id">  
    <div id="section" class="screen_active">
        //content of my first page with the link of the page I need
        //to load on the next div
    </div>
    <div id="section" class="screen"></div> //empty div for the ajax request
</div>

クリックイベントのJSは次のとおりです。

$.ajaxSetup({
    cache: false
});

$('.ei-title h2 a').click(function() {
    event.preventDefault();
    // Get the URL of the page to load
    var url = $(this).attr('href');
    $('.screen').load(url); // load the content to the second div
    $(".screen_active").animate({left: '-50%'}, 500, function() {
        $(".screen_active").css('left', '150%');
        $(".screen_active").appendTo('.screen');
    }); //animate
    $(".screen").load(url).animate({left: '50%'}, 500);
});

Voilà、これで私のコンテンツは完全にロードされますが、divのアニメーションはありません。

お手伝いありがとう。

編集：

このJSコードを作成しました：次のコードを作成しましたが、正常に動作します： `$ .ajaxSetup（{cache：false}）;

$('.ei-title h2 a').click(function() {
    event.preventDefault();
    // Get the URL of the page to load
    var url = $(this).attr('href');
    $('#section2').load(url, function() { // load the content to the second div
        $("#section").animate({left: '-100%'}, 1500, function() {
            $("#section").css('left', '100%');
            $("#section").appendTo('#section2');
        }); //animate
        $('#section2').animate({left: '0%'}, 1500);
    });
});`

そしてこのCSSコード：

.screen_active {
    position : absolute;
    width: 100%;
    left: 0%;
}

.screen {
    position : absolute;
    width:100%;
    left: 100%;
}

それはうまくいきます:)助けてくれてありがとう！

4

1 に答える 1

0

ドキュメントに基づいて、次のアニメーションをコールバック関数に設定します。あなたの場合は次のようになります。

$('.ei-title h2 a').click(function() {
    event.preventDefault();
    // Get the URL of the page to load
    var url = $(this).attr('href');
    $('.screen').load(url, function() { // load the content to the second div
        $(".screen_active").animate({left: '-50%'}, 500, function() {
            $(".screen_active").css('left', '150%');
            $(".screen_active").appendTo('.screen');
        }); //animate
    });
    $(".screen").load(url, function() {
        $(this).animate({left: '50%'}, 500);
    });
});
于 2012-11-15T13:24:54.980 に答える