循环通过文本上的按钮单击jQuery末端的链接
循环通过文本上的按钮单击jQuery末端的链接
提问于 2015-11-17 19:54:30
我是jQuery的新手，所有的一切都伴随着我！因此，我试图创建一个按钮，当点击，消失和一个循环的文本旋转，在这个周期的结束，一个链接显示给用户然后点击上。
我已经把文字的基本周期写下来了，但是我被困住了！有人能帮我吗？非常感谢!
var divs = $('div[id^="content-"]').hide(),
i = 0;
(function cycle() {
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
i = ++i % divs.length;
})();<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">Process</div>
<div id="content-1">stage 1</div>
<div id="content-2">stage 2</div>
<div id="content-3">stage 3</div>
<div id="content-4">stage 4</div>
<div id="content-5">stage 5</div>
<a href="google.com">Your link</a>
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-11-17 20:31:01
我想我已经解决了你的问题。你可以试试：
function cycle(ele, i) {
if (ele.length > 0 && i < ele.length) {
$(ele[i]).fadeIn(400, function() {
$(this).delay(1000).fadeOut(400, function() {
cycle(ele, i + 1);
});
});
} else {
$('a[id^="link-"]').show();
}
}
$(function() {
$('div[id^="content-"]').hide();
$('a[id^="link-"]').hide();
$('#button').click(function() {
$(this).hide();
cycle($('div[id^="content-"]'), 0);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.11.2.js"></script>
<script src="jquery-ui.js"></script>
<script type="application/javascript">
</script>
</head>
<body>
<button id="button">Process</button>
<div id="content-1">stage 1</div>
<div id="content-2">stage 2</div>
<div id="content-3">stage 3</div>
<div id="content-4">stage 4</div>
<div id="content-5">stage 5</div>
<a id="link-1" href="google.com">Your link</a>
</body>
</html>
Stack Overflow用户
发布于 2015-11-17 20:27:26
试试这个：
$('a').hide();
var divs = $('div[id^="content-"]').hide(),
i = -1;
$("#button").click(function()
{
$(this).hide();
(function cycle() {
if(i < divs.length - 1)
i = ++i % divs.length;
else
{
$('a').show();
return;
}
divs.eq(i).fadeIn(400)
.delay(1000)
.fadeOut(400, cycle);
})();
});http://jsfiddle.net/86829ryz/16/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33765814
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号