Question

这与此帖大致相同：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);
});

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%;
}

工作正常:) 感谢您的帮助！

Answer 1

基于documentation，在回调函数中设置下一个动画。在你的情况下应该是：

$('.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);
    });
});

带有ajax功能的div幻灯片

1 个答案: