我目前正在设置一系列按钮,每个按钮都有一个标题,显示更多关于翻转的信息。页面布局的设计使介绍部分位于中间,周围有按钮。滚动任何按钮会触发一个功能来隐藏介绍,然后显示有关正在与哪个按钮交互的更多信息。在推出时,我希望再次显示介绍,但在超时之后。
我遇到了一些超时不起作用的问题 - introshow 功能似乎没有触发。
我试图让示例保持简单 - 实际上 introshow 函数将包含一些动画,但这与我遇到问题的超时函数无关。说到 jQuery,我还是个新手!
JS:
$(document).ready(function() {
$('div.pcontents > div').addClass('hidden');
$('.person').each(function() {
var theClass = $(this).attr('id');
var $person = $(this)
$person.hover(
function() { // RollOver
var index = 0;
console.log('roll over')
introhide();
$('.pcontents .' + theClass).removeClass('hidden');
$person.addClass('active');
}, function() { // RollOut
console.log('roll out')
$('.pcontents .' + theClass).addClass('hidden');
$person.removeClass('active');
$(function() {
setTimeout(function() {
introshow();
}, 2000 + index++);
});
});
});
var introhide = function() {
$('#intro').addClass('hidden');
}
var introshow = function() {
$('#intro').removeClass('hidden');
}
});
这是HTML
<div id="wrap">
<div id="persons">
<dl class="person" id="pone">
<dd>The first person</dd>
</dl>
<dl class="person" id="ptwo">
<dd>The second person</dd>
</dl>
<dl class="person" id="pthree">
<dd>The third person</dd>
</dl>
<dl class="person" id="pfour">
<dd>The forth person</dd>
</dl>
</div>
<div class="pcontents">
<div class="pone">
<h3>Person One</h3>
<p>Description one</p>
</div>
<div class="ptwo">
<h3>Person two</h3>
<p>Description two</p>
</div>
<div class="pthree">
<h3>Person three</h3>
<p>Description three</p>
</div>
<div class="pfour">
<h3>Person four</h3>
<p>Description four</p>
</div>
</div>
<div id="intro">
<p>This is the intro</p>
</div>
如果有人可以帮助我,那就太好了。
富有的