Question

我有一堆带有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>

Answer 1

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

$('.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();
});

Answer 2

要确定切换速度，可以使用重载功能：

$(selector).toggle(speed);

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

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

Answer 3

我用这段代码解决了这个问题，当你处理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();
  }
});

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

jquery切换加载范围

3 个答案: