加载带有幻灯片效果的 AJAX

Question

我的计划是创建一个内容 DIV，在该 div 中我将通过 AJAX 加载内容。我希望已经加载的页面向左滑动，使用 circle.gif 淡入加载页面，然后淡入新内容，以此类推其余页面。

我有这段代码，但它到顶部而不是左边，我认为没有 scrollLeft。

$("#someDiv").slideUp("slow").load('blah.html', function() {
    $(this).slideDown("slow");
});

还有这个：

$('.cont a').click(function() {
        var page = $(this).attr('href');
        $('.p-list').prepend('<div class="loader"> </div>');
        $('.p-list').slideUp("slow").load(page +" .proj", function() {
             $(this).fadeIn("slow"); //or show or slideDown
        });
        return false;
});

Answer 1

像这样使用animate 和left 属性：

$("#someDiv").slideUp("slow").load('blah.html', function() {
    $(this).animate({'left' : 'show'});
});

您还可以根据需要使用right、margin-left、margin-right 和show 作为值。

要通过水平滑动将它们隐藏起来，请改用hide 值。

确保首先隐藏元素并为这些属性设置适当的 CSS 值。