javascript和ajax加载，然后效果

发布于 2024-08-03 02:34:59 字数 474 浏览 2 评论 0原文

我有一个 javascript 代码，我试图从一个单独的页面加载一个列表（使用 jQuery 的 load() 函数），将当前列表滑出并滑入新列表。

现在，我不想要旧列表滑动直到新列表完全加载后。谁能告诉我如何实现这一目标，而不会让脚本在执行时有第二个想法。

谢谢。

编辑

$('.cont a').click(function() {
    var page = $(this).attr('href');
    $('.p-list').prepend('<div class="loader">&nbsp;</div>');
    $('.p-list').load(page +" .proj").hide().fadeIn();
    return false;
});

抱歉没有输入代码。但是，我真的不知道这有多大帮助......

原文

I have a javascript code, whereby I'm trying to load a list from a separate page (using jQuery's load() function), slide the current list out and slide the new list in.

Now, I don't want the old list to slide until after the new list has been completely loaded. Can anyone tell me how to achieve this without looking like the script is having second thoughts while execution..

Thank you.

Edit

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

Sorry for not putting the code in. However, I don't really know how much help this is...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

谎言月老 2024-08-10 02:35:00

应该这样做：

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

如果您在 load 回调（或任何其他 ajax 方法）中调用 slideDown 方法，这将确保动画在元素填充响应后发生。

编辑：要将其应用到您的代码中：

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

This should do it:

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

If you call the slideDown method in load's callback (or any of the other ajax methods), that will ensure the animation happens after the element has been filled with the response.

EDIT: To apply that to your code:

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

回复收藏 0 原文

水中月 2024-08-10 02:35:00

您也可以尝试这个：

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

它对我来说效果更好，因为您在幻灯片效果完成后加载页面。

You can also try this:

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

It worked better for me, as you load the page once the slideUp effect is done.

回复收藏 0 原文

~没有更多了~