我对 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>
最佳答案
我想已经找到了解决您问题的方法。您可以尝试:
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>
关于javascript - 单击按钮上的循环文本并在 jQuery 末尾添加链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33765814/