Ajax内容和jQuery动画效果 [英] Ajax content and jQuery animation erfects

问题描述

我正在尝试使用jQuery动画效果使WordPress帖子显示Ajax内容，问题是第一个动画-在这种情况下，"fadeOut"工作正常，但第二个动画"FadeIn"或我尝试使用的任何形式，对新内容没有影响，加载的内容只会显示而没有任何影响.

I'm trying to make Ajax content for WordPress posts to appear using jQuery animation effects, the problem is that the first animation - in this case "fadeOut" works OK but the second one "FadeIn" or whatever i try to use, has no effect on the new content, the loaded content just appears without any effect.

这是我使用的代码:

$.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;

});

推荐答案

您必须传递不带括号的函数引用，因此请更改以下内容:

You have to pass a function reference without parens so change this:

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传递它时，它只是立即执行它并传递调用未定义函数的返回值，这不是您想要的.如果仅传递不带括号的函数名，则该函数引用是宿主函数可以在以后某个时间调用的函数引用.

When you try to pass it with parens, it just executes it immediately and passes the return value from calling the function which is undefined so that isn't what you want. When you pass just the function name without the parens, that is a function reference that the host function can then call sometime later.

仅供参考，您已经在此处正确进行了操作

FYI, you were already doing it correctly here:

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

这篇关于Ajax内容和jQuery动画效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！