在html加载之前和之后的FadeOut和FadeIn

时间:2013-07-03 00:12:32

标签: jquery fadein fadeout

我正在处理其项目加载外部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);
   });
});

1 个答案:

答案 0 :(得分:0)

我认为问题是你没有在适当的时候调用fadeIn。将fadeIn放在load的回调函数中。我希望这是你遇到的问题。

 $(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
             });
         });
     });
 });