javascript - 单击按钮上的循环文本并在 jQuery 末尾添加链接

标签 javascript jquery

我对 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/

相关文章:

javascript - 如何知道鼠标在 DIV 中悬停在哪个位置的哪个字符

javascript - 从多维数组 JS 的 while 循环中获取未捕获的类型错误

javascript - 单击显示/隐藏 - Javascript

javascript - 获取promise中的返回函数值

javascript - 仅将移动用户重定向到不同的 .html 文件一次

javascript - 3种不同类型的JavaScript对象,有什么区别?

javascript - 在 jsTree 中获取已检查的节点

javascript - backbone.js:可以将 &lt;script type="text/template> 内容推送到外部文件

javascript - Puppeteer:标记为 "xhr"类型的 javascript 文件?

javascript - 使用 jQuery 更改 HTML 属性