Question

我的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也无效......

Answer 1

我不太确定this fiddle是否符合您的要求。

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

查看更新后的fiddle。

Answer 2

问题是在将内容逐渐淡入之前编写内容，一旦我将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();
            });

它有效

Answer 3

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

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

修改：
我会抓住我认为正在发生的事情...... 我相信当你使用fadeOut jQuery为不透明度样式设置动画，然后在完成时删除它并应用display:none来隐藏它。这意味着它的不透明度值将在fadeOut之后恢复为默认值1，因此当您尝试将不透明度设置为1时，它没有任何区别。

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

问题淡出内容

3 个答案: