阿贾克斯：淡入新的内容仅当它的满载 [英] Ajax: fade in new content only if its fully loaded

问题描述

我不知道这种技术是错误的，但我真的只希望新的内容时，它的满载在褪去。好像beforeSend和完整的发送在时机没有影响。新内容将只淡入甚至在向上滑动已经发生，FE。

我还没有完全熟悉AJAX，你必须知道。

下面是我的code：

  $（函数（）{
    VAR replacePage =功能（URL）{

        $阿贾克斯（{
            网址：网址，
            输入：'得到'，
            数据类型：HTML，
            beforeSend：函数（）{
                $（。MENUE）效果基本show（）。
            }，
            成功：功能（数据）{
                变种的dom = $（数据）;
                。VAR HTML = dom.filter（'＃内容）HTML（）;

                $（'＃内容）HTML（HTML）;

            }，
            完成：函数（）{
                $（＃内容）淡入（）。
            }
        }）;
    }

    $（'导航一）。住（点击，功能（五）{
        history.pushState（NULL，NULL，this.href）;
        replacePage（this.href）;
        即preventDefault（）;
    $（＃内容）隐藏（）。
    }）;

    $（窗口）.bind（'popstate'，函数（）{
        replacePage（location.pathname）;
    }）;
}）;
 

解决方案

请尝试以下操作：

 成功：功能（数据）{
           变种的dom = $（数据）;
           。VAR HTML = dom.filter（'＃内容）HTML（）;
           $（MENUE）承诺，（）。完成（功能（）{
                $（'＃内容）。HTML（HTML）.fadeIn（）
           }）
        }，
 

也可以使用效果基本show（）的回调函数执行后，动画完成：

  $（。MENUE）。效果基本show（'慢'，函数（）{
    $阿贾克斯（{
        网址：网址，
        输入：'得到'，
        数据类型：HTML，
        成功：功能（数据）{
            变种的dom = $（数据）;
            。VAR HTML = dom.filter（'＃内容）HTML（）;
            $（'＃内容）。HTML（HTML）.fadeIn（）
        }
    }）;
 }）
 

注意生活（）是德precated，你可以使用在（）方法来代替。的

I don't know if this technique is wrong but I really only want the new content to be faded in when it's full loaded. It seems like beforeSend and complete send has no effect in timing. The new content will just fade in even before the slide up has happened,f.e..

I'm not yet quite familiar with ajax you must know.

Here is my code:

$(function(){
    var replacePage = function(url) {

        $.ajax({
            url: url,
            type: 'get',
            dataType: 'html',
            beforeSend: function() {    
                $(".menue").slideUp();
            },
            success: function(data){
                var dom = $(data);
                var html = dom.filter('#content').html();

                $('#content').html(html);

            },
            complete: function(){
                $("#content").fadeIn(); 
            }
        });
    }

    $('nav a').live('click', function(e){
        history.pushState(null, null, this.href);   
        replacePage(this.href);
        e.preventDefault();
    $("#content").hide();
    });

    $(window).bind('popstate', function(){
        replacePage(location.pathname);
    });
});

解决方案

Try the following:

success: function(data){
           var dom = $(data);
           var html = dom.filter('#content').html();
           $(".menue").promise().done(function(){
                $('#content').html(html).fadeIn()
           })
        },

or you can use slideUp()'s callback function which executes after animation is complete:

$(".menue").slideUp('slow', function(){
    $.ajax({
        url: url,
        type: 'get',
        dataType: 'html',
        success: function(data){
            var dom = $(data);
            var html = dom.filter('#content').html();
            $('#content').html(html).fadeIn()
        }
    });
 })

note that live() is deprecated and you can use on() method instead.

这篇关于阿贾克斯：淡入新的内容仅当它的满载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！