0

这与这篇文章的问题大致相同：slide div offscreen, append content with ajax call, slide div onscreen

但我不能有动画。我认为这是因为我的 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);
});

瞧，我的内容已完美加载，但我的 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 回答