0

我有以下 Jquery，在单击复选框时，它会重新加载一个 DIV，传递框的值并根据查询显示新项目。

我想有一个“加载”栏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

通常认为让您的用户等待三秒钟只是为了展示您的加载栏是不好的做法，当它淡出时，六秒钟过去了，您的用户已经离开了。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

一个简单的setTimeout()函数可以延迟命令的执行。

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

延迟被指定为setTimeout函数中的第二个参数。在这个例子中，我放置了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 回答
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 回答