gpt4 book ai didi

javascript - 使用 fadeLoop 显示和隐藏 div 的工具提示定时教程

转载 作者:行者123 更新时间:2023-11-28 02:32:34 24 4
gpt4 key购买 nike

因此,我创建了一个在线工具提示教程,并将每个工具提示设置为以 7 秒的间隔淡入和淡出。一切都运行得很好,除了当第一次打开打开交互式教程的按钮时,所有工具提示都会在屏幕上闪烁一秒钟 - 我不希望发生这种情况。关于如何消除这种情况的发生有什么想法吗?

此外,我想在一个工具提示淡出和下一个工具提示淡入之间添加 300 毫秒的重叠。如何调整代码以实现这一点?

这是我控制 fadeLoop 的 Javascript:

<script src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
fadeLoop()
function fadeLoop() {

var counter = 0,
divs = $('.fader').hide(),
dur = 300;

function showDiv() {
$("div.fader").fadeOut(dur) // hide all divs
.filter(function(index) {
return index == counter % divs.length;
}) // figure out correct div to show
.delay(dur) // delay until fadeout is finished
.fadeIn(dur); // and show it
counter++;
}; // function to loop through divs and show correct div
showDiv(); // show first div
return setInterval(function() {
showDiv(); // show next div
}, 7 * 1000); // do this every 7 seconds
};

$(function() {
var interval;

$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
});
</script>

这是我的 HTML:

<!--#include file="header.asp"-->
<% if Request("interactive") = "on" then %>
<form name="tutorial">

<div class="fader"><div class="arrow-w arrowlocation1" style="font-size:1em;" ></div><div id="tutorial1" class="tutorial createquestion1">Start by creating a title and selecting a folder for your question to be stored in.</div></div>

<div class="fader"><div class="arrow-w arrowlocation2" style="font-size:1em;" ></div>
<div id="tutorial2" class="tutorial createquestion2">Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.</div></div>

<div class="fader"><div class="arrow-w arrowlocation3" style="font-size:1em;" ></div>
<div id="tutorial3" class="tutorial createquestion3">Select your options and/or upload an attachment (file, video or audio).</div></div>

<div class="fader"><div class="quicktiptitle quicktiplocation4">QUICK TIP</div><div class="arrow-n arrowlocation4" style="font-size:1em;" ></div>
<div id="tutorial4" class="quicktip createquestion4">To create questions easier update your question preferences in your account area options.</div></div>

<div class="fader"><div class="arrow-w arrowlocation5" style="font-size:1em;" ></div>
<div id="tutorial5" class="tutorial createquestion5">Your rationale can be used to provide feedback to students on this question and you also can use internal comment to track notes on changes, updates, textbook information and more.</div></div>

<div class="fader"><div class="arrow-e arrowlocation6" style="font-size:1em;" ></div>
<div id="tutorial6" class="tutorial createquestion6">Write your questions, answers and you are ready to go.</div></div>

<div class="fader"><div class="arrow-w arrowlocation7" style="font-size:1em;" ></div>
<div class="quicktiptitle quicktiplocation7">QUICK TIP</div>
<div id="tutorial7" class="quicktip createquestion7"> Click on this icon to open and close sections that you don't use. These will remain closed whenever you visit this page until you open them again.</div></div></form>

有什么想法吗?

克里斯

最佳答案

当我在 jsFiddle 中运行它时看起来运行良好。也许在 $(document).ready() 触发之前 div 都是可见的?您可以尝试最初使用 css 隐藏 .fade div,以便在 jQuery 脚本运行之前它们不会显示。

编辑

好的,在您发表评论后,我在 jsFiddle 中对此进行了测试它似乎可以解决你的问题。基本上,我使用 CSS 隐藏 div,然后在 hide() 函数调用之前将可见性设置为 visible

所以在 CSS 中:

.fader
{
visibility:hidden;
}​

然后在脚本中替换:

divs = $('.fader').hide()

与:

divs = $('.fader').css('visibility','visible').hide()

然后它应该可以工作

关于javascript - 使用 fadeLoop 显示和隐藏 div 的工具提示定时教程,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13917233/

24 4 0
文章推荐: javascript - 使用 javascript 将 "id"添加到 <input> 标签中
文章推荐: html - 自举重叠列
文章推荐: javascript - 使用带有 sql server 字段的 c#、javascript 和 HTML 在