jquery切换加载范围

时间:2011-10-10 16:19:22

标签: jquery

我有一堆带有dof类的项目,用jquery切换显示和隐藏

我目前正在使用此代码来显示和隐藏它:

$('.dof').toggle();

效果很好,但切换时间大约需要30秒。

我添加了这个以显示加载图片:

<a href="#" onclick="$('#loading').show();$('.dof').toggle();$('#loading').hide();">
    Toggle DOF
</a>

<span id="loading" style="display:none;">
    <img src="/assets/ajax-loader.gif" />
</span>

这未显示加载范围。我可以确认加载图像是否显示我是否取出显示:无;

我做错了什么?

修改

我从Josiah Ruddell的建议中尝试了这个。

(原谅我,我使用coffescript,所以我将它全部转换为coffescript然后返回显示在这里)

$('#toggledof').click(function() {
  var $dofs, doflen, toggleComplete;
  $("#loading").show();
  toggleComplete = function() {
    return $("#loading").hide();
  };
  $dofs = $(".dof");
  doflen = $dofs.length;
  return $dofs.each(function(i) {
    $(this).toggle();
    if (i === doflen - 1) {
      return toggleComplete();
    }
  });
});

然后我将a标签更改为:

<a href="#" id="toggledof">
    Toggle DOF
</a>

3 个答案:

答案 0 :(得分:0)

由于动画持续时间选项,切换功能不同步。您可以为切换指定回调。

$('.dof').toggle(function(){
    $('#loading').hide();
});

但是,如果页面上有多个.dof元素,则每个元素都会发生回调。

<强>更新 您需要跟踪切换进度中的位置。切换完所有项目后,显示加载程序。另外,您可以考虑优化选择器以提高此操作的速度。至少可以在.之前添加节点名称,例如div.dof

var toggleComplete = function(){
        $('#loading').hide();
    },
    $dofs = $('.dof'),
    doflen = $dofs.length;

$dofs.each(function(i){
    $(this).toggle();
    if(i == doflen -1) toggleComplete();
});

答案 1 :(得分:0)

要确定切换速度,可以使用重载功能:

$(selector).toggle(speed);

其中speed参数可以采用以下值:“slow”,“fast”,“normal”或以毫秒为单位的时间。

这将按照您想要的速度制作动画。

答案 2 :(得分:0)

我用这段代码解决了这个问题,当你处理1900个元素时,我猜.toggle()很糟糕....

html

<div id="testdof" style="display:none"></div> <!-- because the dof elements are hidden at page load -->

然后是jquery

$('#toggledof').click(function() {
  if ($('#testdof').css('display') === 'none') {
    $(".dof").show();
    $("#testdof").show();
  } else {
    $(".dof").hide();
    $("#testdof").hide();
  }
});

运行得足够快,不关心加载元素。