使用 jQuery 淡入淡出不同的 div 以及输入文本
我对 jQuery 相当陌生，正在尝试从该网站重现帮助气泡 http://www.wolframalpha.com/
我已经取得了一些进展，但现在很挣扎。 这就是我到目前为止所拥有的：
帮助气泡的html：
<div class="help" id="help1">
<p>foo</p>
</div>
<div class="help" id="help2">
<p>bar</p>
</div>
样式：
div.help {
top: 40px;
left: 0;
position: absolute;
background-color: #gray;
padding: 10px;
display: none;
}
jQuery，在加载dom时运行：
function help() {
$('#help1').delay(1000).fadeIn(500).delay(4000).fadeOut(500, function() {
$('#help2').fadeIn(500);
});
}
这会在短暂的延迟后淡入第一个气泡，然后将其淡出，然后是第二个气泡。
我现在想做的是在输入中添加一些相应的文本与气泡一起淡入和淡出（如我链接到的示例中所示）。我真的不知道如何解决这个问题..
感谢您的阅读。
I am fairly new to jQuery, and am trying to reproduce the help bubbles from this site http://www.wolframalpha.com/
I have made some progress, but am now struggling.
This is what i have so far:
html of the help bubbles:
<div class="help" id="help1">
<p>foo</p>
</div>
<div class="help" id="help2">
<p>bar</p>
</div>
with the style:
div.help {
top: 40px;
left: 0;
position: absolute;
background-color: #gray;
padding: 10px;
display: none;
}
jQuery which gets run when dom is loaded:
function help() {
$('#help1').delay(1000).fadeIn(500).delay(4000).fadeOut(500, function() {
$('#help2').fadeIn(500);
});
}
This fades the first bubble in after a short delay, and then fades it out, then follows with the second bubble.
What i would like to do now is have some corresponding text in an input fade in and out along with the bubbles (as in the example i linked to). I don't really know how to tackle this..
thanks for reading.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
一个可能会让您走上正确路径的注释是，您所看到的应该在输入框中的“文本”实际上是一个堆叠在输入框顶部的 div，从而产生了它在输入框中的错觉。
另外，这个也可能有帮助。 ;)
A note that might put you down the correct path is that the 'text' you are seeing supposedly being in the input box, is actually a div stacked on top of the input box, creating the illusion that it is in the input box.
Also, this might help also. ;)