延迟fancybox打开,同时不延迟数据加载
问题描述:
我有一个带引号分隔行的文本文件。我正在使用<a>
标签上的jquery点击函数在隐藏div中加载<p>
与class="quotes"
的行。这工作正常。延迟fancybox打开,同时不延迟数据加载
点击后,此锚点也会启动Fancybox 2灯箱,并将#quote-div
(隐藏div内的div)的内容加载为内联。这也适用。
问题是发生得太快。我需要保持文本的加载速度并稍微延迟Fancybox。
当Fancybox打开时,有时会出现一个口吃,因为它会重新调整加载的文本的窗口高度。我尝试在悬停而不是点击的情况下加载文本,但在Chrome中,如果鼠标移过<a>
标签,则会触发另一个悬停。
我在这里发现了几篇文章中的setTimeout,但我不确定如何在代码中设置它,以便在这种情况下正常工作。
我也在网站的其他地方使用Fancybox,我不想延迟发生。
HTML:
<div style="display: none">
<div id="quote-div">
<p class="quotes">... content loads here...</p>
</div>
</div>
<a id="q-click" class="clickBlock fancybox" href="#quote-div"> </a>
jQuery函数:
$('#q-click').click(function() {
$.get('/assets/quotes.txt', function(data) {
var quotes = data.split("\@");
var idx = Math.floor(quotes.length * Math.random());
$('.quotes').html(quotes[idx]);
});
});
的fancybox代码:
$(".fancybox").fancybox({
helpers: {
title : {
type : 'inside'
},
overlay: {
locked: false
}
}
});
答
我会尝试调用的fancybox编程的$.get()
回调中,因为你要绑定两个不同的事件到相同的元素。
喜欢的东西:
$('#q-click').click(function() {
$.get('/assets/quotes.txt', function (data) {
var quotes = data.split("\@");
var idx = Math.floor(quotes.length * Math.random());
$('.quotes').html(quotes[idx]);
$.fancybox("#quote-div", {
helpers : {
title : {
type : 'inside'
},
overlay : {
locked : false
}
}
});
});
return false;
});
然后取出正规的fancybox初始化脚本
$(".fancybox").fancybox()
感谢,我给它一个尝试。 – liquidRock