Jquery 带有ajax功能的div幻灯片

这与本文的问题大致相同：

但是我没有动画。我想这是因为我的div

#部分
有
宽度：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>

瞧，有了这个，我的内容完全加载了，但是我没有任何我的div动画

谢谢你的帮助

编辑：

我编写了以下JS代码：
我编写了以下代码，效果很好：
`$.ajaxSetup({
缓存：false
});

这个CSS代码：

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

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

它工作正常：）
谢谢你的帮助
 根据，在回调函数中设置下一个动画。在您的情况下，应：

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

在html中，同一id不能有两次。你的元素的css应该非常有用。对不起，这是我的2个div的css。screen{left:150%；}。screen_active{left:50%；}` ei滑块的css在此处可用：
.screen_active {
    position : absolute;
    width: 100%;
    left: 0%;
}

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

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