【问题标题】:Need help with jQuery AJAX and transition effects在 jQuery AJAX 和过渡效果方面需要帮助
【发布时间】:2011-08-03 17:43:54
【问题描述】:

好的,伙计们,我的网站快完成了 - 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;
});

非常感谢您的时间和帮助

【问题讨论】:

    标签: jquery ajax effects transition


    【解决方案1】:

    试试这个

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

    【讨论】:

    • 感谢您的回答,但我看不出有什么不同。
    • 是的,但是板子只会在加载成功时滑下,如果它已经动画它会在加载前停止。
    【解决方案2】:

    这是我最终使用的代码。

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

    只是为了让人们知道。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2023-03-06
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多