0

从我的 ajax 页面加载中消失的内容有点问题。问题是，它不会淡入，它只是立即显示（延迟后）。

代码：

    jQuery(window).on("load", function(){
    console.log('document ready');
    Initialize();
});
// Initialize all our scripts
function Initialize(){
    // Ajax page loading
    var $a = jQuery('[data-loadajax="true"]');
    var $body = jQuery('.main');
    $a.bind('click', function(e){
        e.preventDefault();
        var $this = jQuery(this);
        var $href = $this.attr('href');
        $body.fadeOut('slow', function(){
            jQuery('#loading').fadeIn('fast');
            loadPage($href, $body); 
        });
    });
    // Load up the masonry stuff (now checks to see if the grid exists first)
    FireExtras();
}
function loadPage(strPageToLoad, strWhereToLoadIt) {
    jQuery.ajax({
        method: 'post',
        url: strPageToLoad,
        cache: false,
        dataType: "html",
        async: true,
        data: {'_t':Math.floor(+new Date() / 1000)},
        success: function (html) {
            // Get just the body
            // Get the full HTML of the return
            var $html = jQuery(html);
            $container = $html.find('.main');
            // Get Title
            var $title = $html.filter('title').text();
            // Get the Meta Description
            var $desc = $html.filter('meta[name="description"]').attr('content');
            // Get the Meta Keywords
            var $keyw = $html.filter('meta[name="keywords"]').attr('content');
            // Get the Meta Author          
            var $auth = $html.filter('meta[name="author"]').attr('content');
            // Get the scripts
            var $scripts = $html.filter('script');
            // Write out the Body
            jQuery(strWhereToLoadIt).html($container);
            // Hide the pre-loader, and show the body
            window.document.title = $title;
            jQuery('meta[name=description]').remove();
            jQuery('meta[name=keywords]').remove();
            jQuery('meta[name=author]').remove();
            jQuery('head').append('<meta name="description" content="' + $desc + '">');
            jQuery('head').append('<meta name="keywords" content="' + $keyw + '">');
            jQuery('head').append('<meta name="author" content="' + $auth + '">');
            window.history.replaceState(null, null, strPageToLoad);
            //window.location.replace(strPageToLoad);
            $scripts.remove();
            // Now let's fire up the scripts again, and pull in the appropriate script files...
            $scripts.each(function(i){
                //$.getScript(this.src);                
            });
            setTimeout(function(){
                console.log('Loading...');
                jQuery(strWhereToLoadIt).fadeIn(3000, function(){
                    jQuery('#loading').fadeOut('fast');
                    FireExtras();
                });                 
            }, 10000);
        },
        error: function () {
            console.log('DANGER WILL ROBINSON!');
            window.location.href = strPageToLoad;
        }
    });
}
function FireExtras(){
    var menu = new cbpTooltipMenu( document.getElementById( 'cbp-tm-menu' ) );
    if(jQuery('#grid').length){
        new AnimOnScroll(document.getElementById('grid'), {
            minDuration: 0.4,
            maxDuration: 0.7,
            viewportFactor: 0.2
        });
    }
}

如何获得内容的success功能fadeIn而不是立即显示？

即使是 .delay 也不起作用......

4

3 回答 3

0

我不太确定这个小提琴是否符合您的要求。

HTML：

<button id="clickMe">click me</button>
<div id="showUp">visible or hidden?</div>

jQuery：

$('#clickMe').click(function() {
    $('#showUp').hide().fadeIn(2000);
    //FireExtras();
});

CSS：无，样式由你决定；）

编辑

首先，我们应该确保在我们使用 JS/jQuery 执行某些操作之前页面已完全加载。因此我们使用

$('window').ready(function(){
    alert('document ready');
    Initialize();
});

查看您更新的小提琴。

于 2013-07-20T14:41:25.273 回答
0

问题是在淡入之前写入内容，一旦我链接jQuery(strWhereToLoadIt).html($container);到

jQuery(strWhereToLoadIt).fadeIn(3000, function(){
                jQuery('#loading').fadeOut('fast');
                FireExtras();
            });

所以它变成：

jQuery(strWhereToLoadIt).html($container).fadeIn(3000, function(){
                jQuery('#loading').fadeOut('fast');
                FireExtras();
            });

有用

于 2013-07-22T19:28:42.753 回答
-1

您正在为opacity样式设置动画，默认情况下从 1 开始。确保在开始动画之前将不透明度设置为 0。

jQuery(strWhereToLoadIt).css("opacity", 0).delay(1000).queue(function () {
    ...

编辑：
我会尝试一下我认为正在发生的事情......
我相信当你使用fadeOutjQuery 动画时，不透明样式会在完成时将其移除并应用display:none以使其隐藏。这意味着它的不透明度值将在淡出之后恢复为默认值1，因此当您尝试将不透明度设置为 1 时，它没有任何区别。

我建议使用jQuery(this).fadeIn('slow');而不是动画不透明度。

于 2013-07-20T14:40:44.470 回答