jquery - html 加载前后的 FadeOut 和 FadeIn

Question

我正在开发一个菜单，其项目加载外部 HTML。在加载外部 HTML 之前和之后，我需要淡入淡出或不透明效果。负载工作正常，但不是电荷之间的过渡效果。我第一次单击菜单项时似乎有效，但以下无效。

$(document).ready(function() {                         
$('#nav li').click(function () {
    var prod = $(this).children("a").attr('href');
    $(".contenido").fadeOut(500, function() {
          $(".contenido").load(prod);
    });
    $(".contenido").fadeIn(500);
   });
});

Answer 1

I think the problem is you are not calling fadeIn at the right time. Put fadeIn in the callback function of load. I hope that is the problem you were having.

 $(document).ready(function() {                         
     $('#nav li').click(function () {
         var prod = $(this).children("a").attr('href');

         $(".contenido").fadeOut(500, function() {
             $(this).load(prod, function(){
                    $(this).fadeIn(500); //Fade In after load finishes
             });
         });
     });
 });