2011-11-15 7 views
3

私が使用して事業部の内容を変更しようとしています:.loadと.fadeInを使用してDIVコンテンツを変更するには?

$('#content').click(function() { 
    $('#content').fadeOut().load('about.php').fadeIn('normal'); 
}); 

しかし、それは常に点滅し、私はjQueryのに少し経験の浅いですので、私は、それを解決する方法がわかりません。

私はここでこの同じ質問を見て、私は選択された答えを試みたが役に立たなかった。 fadeOutためloadcallbackとしての使い方

$('#content').click(function(){ 
    $('#content').fadeOut(function(){ 
    $('#content').load('about.php').fadeIn('normal'); 
    }); 
}); 

答えて

4

.fadeOut()および​​関数のコールバック関数を使用する必要があります。現時点では、フェードアウトし、HTMLを追加してから、同時にフェードインします。

試してみてください。

//add event handler to click event for the #content element 
$('#content').click(function() { 

    //cache this element 
    var $this = $(this); 

    //fadeOut the element 
    $this.fadeOut(function() { 

     //after fadeOut is done, change it's HTML 
     $this.load('about.php', function() { 

      //now fadeIn the new HTML, this is in the callback for the `.load()` 
      //function because `.load()` is an asynchronous function 
      $this.fadeIn(); 
     }); 
    }); 
}); 


次のいずれかが実行される前に、各プロセスが完了できるように、私はすべてのcallback機能を入れ子になった理由があります。最初に.fadeOut()を完成させてから、​​がデータを取得してDOMに配置してから、新しいHTMLで要素.fadeIn()を配置することができます。

+0

説明をありがとう。それは私の問題を解決しました。 – vvhat

+0

私はそれが助けてうれしいです。 – Jasper

3

あなたはこのような何かを行う可能性があります。

+1

Answer、thanksありがとうございました。あなたのための10ポイント。 – vvhat

関連する問題