需要有关 jQuery AJAX 和过渡效果的帮助

发布于 2024-11-28 00:36:07 字数 684 浏览 0 评论 0原文

好吧,伙计们,我的网站即将完成 - http://www.visualise.ca/

但有一件事这真让我烦恼。当我单击缩略图打开一篇使用 AJAX 在同一页面中加载的帖子,然后单击另一个缩略图加载另一篇帖子时,过渡不顺畅,图像需要一段时间才能加载,而且很丑。有没有办法可以改进这一点并使一切顺利使用 fadeIn/fadeOut ?

这是我尝试过但没有运气的方法(现在有效)。

$(".ajaxed").live("click", function(event) {
        $.address.crawlable(true).value($(this).attr("rel"));
        $("#content").fadeTo(500,0);
        $("html,body").animate({scrollTop: 205}, 300);
        var post_slug = $(this).attr("rel");
        $("#board").load("ajax/",{slug:post_slug});
        $("#board").delay(1500).slideDown("slow");
        return false;
});

非常感谢您的时间和帮助

OK guys, my website is almost finished - http://www.visualise.ca/

But there is one thing that really bugs me. When I click on a thumbnail to open a post which loads within the same page using AJAX and then click on another thumbnail to load another post the transition is not smooth and the image takes a while to load and it's ugly. Is there a way I can improve that and make everything smooth using fadeIn/fadeOut ?

Here is what I tried with no luck (active now).

$(".ajaxed").live("click", function(event) {
        $.address.crawlable(true).value($(this).attr("rel"));
        $("#content").fadeTo(500,0);
        $("html,body").animate({scrollTop: 205}, 300);
        var post_slug = $(this).attr("rel");
        $("#board").load("ajax/",{slug:post_slug});
        $("#board").delay(1500).slideDown("slow");
        return false;
});

Many thanks for your time and help

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

扫码二维码加入Web技术交流群

发布评论

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

评论(2

街角迷惘 2024-12-05 00:36:07

试试这个

$(".ajaxed").live("click", function(event) {
        var post_slug = $(this).attr("rel");
        $.address.crawlable(true).value(post_slug );
        $("#content").fadeTo(500,0);
        $("html,body").animate({scrollTop: 205}, 300);
        $("#board").stop().load("ajax/",{slug:post_slug}, function(){
            $(this).slideDown("slow")
        });

        return false;
});

Try this

$(".ajaxed").live("click", function(event) {
        var post_slug = $(this).attr("rel");
        $.address.crawlable(true).value(post_slug );
        $("#content").fadeTo(500,0);
        $("html,body").animate({scrollTop: 205}, 300);
        $("#board").stop().load("ajax/",{slug:post_slug}, function(){
            $(this).slideDown("slow")
        });

        return false;
});
仄言 2024-12-05 00:36:07

这是我最终使用的代码。

$(".navig a").live("click", function(event) {
    var post_slug = $(this)[0].pathname.substring(1);
    var board_h = $("#board").height();
    $.address.crawlable(true).value(post_slug).strict(true);
    $("#board-wrapper").css('height', board_h + 'px');
    $("#board").fadeOut('slow', function(){
        $("#board").stop().load("ajax/",{slug:post_slug}, function(){
            $("#board").delay(1000).fadeIn('slow', function(){
                var board_h2 = $("#board").height();
                $("#board-wrapper").css('height', board_h2 + 'px');
            });

        });
    });
    return false;
});

只是为了让人们知道。

Here is the code I end up using.

$(".navig a").live("click", function(event) {
    var post_slug = $(this)[0].pathname.substring(1);
    var board_h = $("#board").height();
    $.address.crawlable(true).value(post_slug).strict(true);
    $("#board-wrapper").css('height', board_h + 'px');
    $("#board").fadeOut('slow', function(){
        $("#board").stop().load("ajax/",{slug:post_slug}, function(){
            $("#board").delay(1000).fadeIn('slow', function(){
                var board_h2 = $("#board").height();
                $("#board-wrapper").css('height', board_h2 + 'px');
            });

        });
    });
    return false;
});

Just to let people know.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文