fade在AJAX .load调用后无法正常工作

Question

我创建了一个回调函数来隐藏.calorie-table div然后在将一个项目添加到我的购物篮后淡化div，但是，只有hide部分正在工作。 fadeIn似乎完全被忽略了。

有人可以提出建议吗？

这是代码：

      $.ajax({
        type: "POST",  
          url: "../ajax/add-ingredient-to-recipe.php?"+dataString,  
          dataType: "html",
          data: dataString,  
          success: function (msg) {

            frames.top.$.fancybox.close(true);                
            frames.top.$('.calorie-table').load('./views/nutritional-data.tmp.php', function(){


                $(this).hide();
                $(this).fadeIn("slow");

            });

            }

        });

Answer 1

通过将ajax调用改为：

来解决自己的问题

            $.ajax({
        type: "POST",  
          url: "../ajax/add-ingredient-to-recipe.php?"+dataString,  
          dataType: "html",
          data: dataString,  

          }).done(function (){

            window.top.$.fancybox.close(true);

        });

并从父页面重新加载div（在打开fancybox的脚本中）

    $(".add-food-button").fancybox({
    width : 750,
    height : 430,
    fitToView : false,
    autoSize : false,
    transitionIn    :    'elastic',
    transitionOut    :    'elastic',
    type                : 'iframe',
    afterClose  : function() {
        $('.calorie-table').load('./views/nutritional-data.tmp.php');
        $('.calorie-table').hide();
        $('.calorie-table').fadeIn(800);
}

});