0

チェックボックスをクリックすると、ボックスの値を渡してDIVを再ロードし、クエリに基づいて新しいアイテムを表示する次のJqueryがあります。

「読み込み中」バーを 3 秒ほど表示したいと思います... DIV のコンテンツを読み込む前に、フェードアウトします。次に、DIV にフェードイン効果をロードします。いくつか試してみましたが、うまくいきませんでした。

これが私のコードです。

ありがとう！

jQuery(document).ready(function($) {
    $("input:checkbox").change(function() {
        if ($(this).is(':checked')) 
        {
            $(".loadingItems").delay(3000).fadeOut(3000);
            var color = [];
            color.push($(this).val());
            $(".indexMain").load('indexMain.php?color='+color);
        }
        else if ($(this).not(':checked')) 
        {
            $(".indexMain").load('indexMain.php');
        }
    });
});
4

5 に答える 5

1

通常、ローディング バーを目立たせるためにユーザーを 3 秒間待機させることは、悪い習慣と見なされます。バーがフェードアウトするまでに 6 秒が経過し、ユーザーは去ります。ajax 呼び出しが終了し、コンテンツの準備が整ったら、読み込みバーを削除します。また、クエリ文字列で配列を使用する必要がありますか?

$(function() {
    $("input:checkbox").on('change', function() {
        $(".loadingItems").fadeIn(300); //fade in on change
        if (this.checked) {
            var color = [];
            color.push(this.value); //array in querystring ?
            $(".indexMain").load('indexMain.php?color='+color, function() {
                $(".loadingItems").fadeOut(300); //remove when load is complete
            });
        }else{
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);  //remove when load is complete
            });
        }
    });
});

私はワイルドな推測をして、これがあなたが求めているものだと言います：

$(function() {
    $("input:checkbox").on('change', function() {
        $(".loadingItems").fadeIn(300); //fade in on change
        var qs = this.checked ? 'color='+this.value : '';
        $(".indexMain").load('indexMain.php'+qs, function() {
            $(".loadingItems").fadeOut(300); //remove when load is complete
        });
    });
});​
于 2012-08-06T21:46:01.413 に答える
0

メソッドのコールバック関数を使用できますfadeOut：

.fadeOut( [duration] [, easing] [, callback] ) callback: アニメーションが完了したら呼び出す関数。

var color = [];
color.push($(this).val());
$(".loadingItems").delay(2700).fadeOut(300, function(){
    $(".indexMain").load('indexMain.php?color='+color);
});
于 2012-08-06T21:41:16.460 に答える
0

何かをdivにロードするときはいつでも使用できる簡単な関数を次に示します

function loadIntoDiv(div,url){
    $("#loader").fadeIn();
    $(div).load(url,function(){
        $("#loader").fadeOut();
    });
}

例：loadIntoDiv(".indexMain",'indexMain.php');

于 2012-08-06T21:43:38.943 に答える
0

単純なsetTimeout()関数は、コマンドの実行を遅らせることができます。

$("#loader").fadeIn();
setTimeout(function(){
  $("#loader").fadeOut();  
  $(".indexMain").load('indexMain.php?color='+color);
  ...
},3000);

遅延は、setTimeout関数の 2 番目のパラメーターとして指定されます。この例では、 を配置し3000ました。この数値はミリ秒単位です。1 秒 = 1000 ミリ秒。

参照 -

于 2012-08-06T21:39:34.010 に答える
0

jQueryプリローダーを探していると思いますか?

http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/

于 2012-08-06T21:39:45.957 に答える