我有一堆带有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>
答案 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();
}
});
运行得足够快,不关心加载元素。