1

私のサイトでは、$.get関数を使用して、データベースからデータを取得し、そのデータを関数にエコーバックするPHPスクリプトへのリンクによって提供されるデータを送信します。関数$.getは、関数を使用.html(data)してデータをフェードインし、divに表示します。

$(document).ready(function() {
    $('.topNavLink').click(function() {
        $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
            $('#contents').fadeOut(100, function() {
                $('#contents').html(data).fadeIn(100)
            });
        });
    });
});

.topNavLinkもちろん、はナビゲーションメニューのすべてのリンクのクラスであり、関数はリンクのタグ間のテキストを読み取ってページの名前を見つけます。

私<div id='#loading'>は最初にCSSによって隠されているを持っていopacity:0ます。.fadeIn(100)関数を使用して、a.topNavLinkがクリックされたときにdivをフェードインし、上記のコードを呼び出してページのコンテンツをロードし、最後にdivをフェードアウトしたいと思います。

私はその前にdivfadeInを呼び出してみまし$.getた：

$('.topNavLink').click(function() {
    $('#loading').fadeIn(100);
    $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
...

私は次のようにfadeInのコールバックオプションを使用してみました：

$('.topNavLink').click(function() {
    $('#loading').fadeIn(100, function() {
        $.get('/view/scripts/data.php', { 'page' : $(this).text() }, function(data) {
...

しかし、最終的にはdivが表示されなかったり、コンテンツが読み込まれなかったりします。

私は何を間違っているのですか（そしてうまくいけば、私の意図は明確であり、あなたは私が達成しようとしていることを知っています）？

4

2 に答える 2

1

#loadingdivを非表示にするのではopacity:0なくdisplay:none、fadeInを機能させるために使用する必要があると思います。

于 2012-10-05T09:16:00.500 に答える
0

読み込み中のdivを表示するために使用できるイベント（http://docs.jquery.com/Ajax_Events）がいくつかあります。beforeSendajax呼び出しが発生する前に起動されるため、試してみることをお勧めします。ajax呼び出しを少し書き直す必要があります（おそらく100％正しくはありませんが、私のポイントを説明する必要があります）：

$.ajax({
    url: '/view/scripts/data.php',
    data: $(this).text(),
    beforeSend: function(){
        $('#contents').fadeOut(100, function(){
            $('#loading').fadeIn(100);
        });
    },
    success: function(data){
        $('#loading').fadeOut(100, function(){
            $('#contents').html(data).fadeIn(100);
        });
    }
});
于 2012-10-05T09:19:59.543 に答える