Ajax内容和jQuery动画的缺陷

我正在尝试使用jQuery动画效果使WordPresspost的Ajax内容出现，问题是第一个动画 – 在这种情况下“fadeOut”工作正常，但第二个“FadeIn”或我试图使用的任何内容，没有对新内容的影响，加载的内容只是出现没有任何影响。

这是我使用的代码：

$.ajaxSetup({ cache: false }); $('.post-link').click(function () { var toLoad = $(this).attr('href'); $('#our_team').fadeOut('500', loadContent); $('#load').remove(); $('#ajax-post-content').append('LOADING...'); $('#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

编辑您的附加范围

 ('... 

或者你可以用javascript隐藏它

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

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

Answer 3

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

  // Your static content  // Your AJAX loaded content  

– 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('LOADING...'); $('#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'); } }); });