0

私は ajax を使用してページをロードしようとしていますが、問題なく正常に動作していますが、fadeIn フェードアウト効果とローダー gif アニメーションを追加したいと考えています。

誰でも私がそれをするのを手伝ってくれませんか。以下のコードを使用しています。

$(document).ready(function(){
    // load index page when the page loads
    $("#main").load("content.php");

    $("#home").click(function(){
    // load home page on click
        $("#main").load("content.php");
    });
    $("#mediakit").click(function(){
    // load about page on click
        $("#main").load("mm-media-kit.php");
    });
});

私はjqueryの経験がありません。

4

3 に答える 3

2

次のようなことを試してください：

HTML:

<div id='main'></div>
<div id='mainloading'><img src='loading.gif'></div>

jQuery:

$("#main").fadeOut().load("content.php", function() {
    $(this).fadeIn();
    $('#mainloading').hide();
});
于 2012-05-10T06:14:34.347 に答える
2

この場合、 http ://api.jquery.com/ajaxStart/およびhttp://api.jquery.com/ajaxStop/を使用して、読み込み中の画像を表示および非表示にすることができます。このような

loading最初は非表示になっているページのどこかにid を持つ読み込み中の画像 div があると仮定しています。次に、上記の2つの関数を使用して、ロード中の画像を次のように表示できます

//show the loader at the start of ajax request
$("#loading").ajaxStart(function(){
   $(this).show();
 });
//hide the loader when ajax request Completes
$("#loading").ajaxComplete(function(){
   $(this).hide();
 });
于 2012-05-10T06:31:36.420 に答える
0

opacity CSS プロパティでanimateを使用して、必要に応じてフェードイン/フェードアウトできます。(ロード前に不透明度をゼロに設定し、ロード コールバックでアニメートして 1 に戻します。)

$("#main").css('opacity', 0).load("mm-media-kit.php", function() {
    $("#main").animate({ opacity: 1}, 'slow');
});

関数fadeIn / fadeOutは基本的に上記の省略形ですが、このシナリオでは本当にフェードアウトしたくないと思います.

于 2012-05-10T06:14:47.640 に答える