1

新しいコンテンツがロードされたら、既にロードされているコンテンツをフェードアウトさせ、次にこの新しいコンテンツをフェードインさせるにはどうすればよいでしょうか。

私はjqueryアドレスを使用してこれを達成しようとしています.別のプラグインで簡単/より良い場合は、提案してください:-)

私が持っているコードは次のとおりです。

    function loadURL(url) {
        console.log("loadURL: " + url);
        $("#content").load(url);
    }

    $.address.init(function(event) {
        console.log("init: " + $('[rel=address:' + event.value + ']').attr('href'));
    }).change(function(event) {
        $("#content").load($('[rel=address:' + event.value + ']').attr('href'));
        console.log("change");
    })

    $('a').click(function(){
        loadURL($(this).attr('href'));
        $("#content").hide();
        $("#content").fadeIn();
    });

コンテンツをフェードアウトするのではなく、一番上にフェードインするローダー div を作成できるのではないかと考えてみましたが、どこに行けばいいのか本当にわかりません。

現時点ではコンテンツがフェードインし、他のリンクをクリックすると新しいコンテンツに変わり、フェードインしますが、新しいコンテンツがフェードインする前にフェードアウトする方法がわかりません.

どんな助けでも大歓迎です！

4

1 に答える 1

5

このフィドルがあなたが探しているもののように聞こえます。私はjQuery.ajax（）を使用します

$('#b').click(function(){
    $.ajax({

      //i had to create another test fiddle to overcome the 'same origin' issues
      url: 'http://fiddle.jshell.net/K6YPD/show/',
      success: function(data) {             

          //we have the data now
          $('#content').fadeOut(1500, function() {
            //this is a callback once the element has finished hiding

              //populate the div with whatever was returned from the ajax call
              $('#content').html(stripHTML(data));
              //fade in with new content
              $("#content").fadeIn(1500);
          });
      }
    });
});
于 2012-10-08T19:33:10.943 に答える