Question

我试图在加载Ajax的页面中添加一个类，然后在jQuery的浏览器中显示它。这是我的代码：

$("#landing li.nav4 a").live('click', function() {
    $("#landing").fadeOut('slow', function(){
        $('#agency').load('assets/ajax/agency.html').fadeIn(function(){
            $("#agency-main nav li.nav1 a").addClass("nav1-on");
        });
    });
    return false;
});

目前发生的情况是页面已加载，然后添加了类，并且在加载类（背景图像）时会出现明显的“闪烁”。

如何加载内容，添加类，然后按顺序添加fadeIn？

Answer 1

我是一个jquery noob所以这更适合我自己的学习 - 为什么不呢？

//make sure #agency is defaulted to display:none, or add a line to check this
$("#landing li.nav4 a").live('click', function() {
  $('#agency').load('assets/ajax/agency.html', function() {
    $("#agency-main nav li.nav1 a").addClass("nav1-on"); 
  });
  $("#landing").fadeOut('slow', function(){
    $('#agency').fadeIn();
   });
  return false;
});

Answer 2

您可以尝试创建要在后台关联类的元素，然后在需要时插入它。

像..

el = $("#landing");
//fadeout el
//remove from html
//add class
//insert it back in

如果你可以在jsfiddle上编写代码，那将非常有用：）

Answer 3

叫我一个坚果吧，但是当你需要的是一个托管的事件顺序时，我讨厌破译一百万个回调：

$("#landing li.nav4 a").on('click', function(event) {
  event.preventDefault(); // better than return false;
  $agency = $('#agency'); // cache it since we use it twice

  // fade out the landing div, and when that's done load agency.html into #agency
  // presumably, #agency is already hidden
  $("#landing").fadeOut('slow', function(){
    $agency.load('assets/ajax/agency.html');
  });

  // add the class to the nav item
  $("#agency-main nav li.nav1 a").addClass("nav1-on");

  // fade #agency in
  $agency.fadeIn();
});

注意2可以采取或离开的其他建议改进：

将.live（）替换为.on（），从jQuery 1.7开始提供。如果您使用的是较旧的jQuery，您仍应该查看.delegate（）而不是.live（）
使用preventDefault（）来阻止click事件冒泡到其默认值;在查看代码时，这样更有效，更容易理解。

Ajax加载之前的addClass

3 个答案: