Question

我是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>

Answer 1

试试这个：

$('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/

Answer 2

我假设你的问题得到了解决方案。你可以尝试：

＆＃13;

        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);
            });
        });

＆＃13;

<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>

＆＃13;

按钮上的循环文本按钮点击结束jQuery链接

2 个答案: