Question

我试图使用jQuery动画效果为WordPress帖子制作Ajax内容，问题在于第一个动画 - 在这种情况下＆＃34; fadeOut＆＃34;工作正常，但第二个＆＃34; FadeIn＆＃34;或者我试图使用的任何内容，对新内容没有影响，加载的内容只是显示没有任何影响。

这是我使用的代码：

$.ajaxSetup({
    cache: false
});
$('.post-link').click(function () {

    var toLoad = $(this).attr('href');
    $('#our_team').fadeOut('500', loadContent);
    $('#load').remove();
    $('#ajax-post-content').append('<span id="load">LOADING...</span>');
    $('#load').fadeIn('normal');

    function loadContent() {
        $('#ajax-post-content').load(toLoad, showNewContent())
    }

    function showNewContent() {
        $('#ajax-post-content').fadeIn('1000', hideLoader());
    }

    function hideLoader() {
        $('#load').fadeOut('normal');
    }
    return false;

});

Answer 1

你必须传递一个没有parens的函数引用，所以改变它：

function loadContent() {
    $('#ajax-post-content').load(toLoad, showNewContent())
}

function showNewContent() {
    $('#ajax-post-content').fadeIn('1000', hideLoader());
}

到此：

function loadContent() {
    $('#ajax-post-content').load(toLoad, showNewContent)
}

function showNewContent() {
    $('#ajax-post-content').fadeIn('1000', hideLoader);
}

当你尝试用parens传递它时，它只是立即执行它并传递返回值来调用未定义的函数，这样就不是你想要的了。当你只传递没有parens的函数名时，这是一个函数引用，然后主机函数可以在稍后调用。

仅供参考，你已经在这里正确地做到了：

$('#our_team').fadeOut('500', loadContent);

Answer 2

编辑您的附加范围

('<span id="load" style="display:none">...

或者你可以用javascript隐藏它

$('#load').hide();
// your fade in is after this hide thing

它没有起作用，因为fadeIn显示了一个带效果的隐藏元素，所以如果它已经显示就没有任何淡入效果

Answer 3

这是一个完整的例子：
- HTML

<table>
    <thead>
        // Your static content
    </thead>
    <tbody>
        // Your AJAX loaded content
    </tbody>
</table>

- JS

$(document).ready(function()
{
    function ajax_request() {
        $.ajax({ 
            //ajax request
        });
    }

    // for when the page first loads
    ajax_request();

    $('#your_trigger').change(function()
    {
        $('table tbody').hide('fast',load_content);
        $('#load').remove();
        $('table tbody').append('<span id="load">LOADING...</span>');
        $('#load').fadeIn('fast');

        function load_content() {
            ajax_request();
            show_new_content();
        }
        function show_new_content() {
            $('table tbody').show('fast',hideLoader());
        }
        function hide_loader() {
            $('#load').fadeOut('fast');
        }

    });

});

Ajax内容和jQuery动画效果

3 个答案: