使用jQuery反复显示/隐藏元素

Kelvin Nielsen 发表于 Dev

凯尔文·尼尔森（Kelvin Nielsen）

我试图重复显示/隐藏一组元素。

以下是HTML：

<div id="1">Div 1</div>
<div id="2">Div 2</div>
<div id="5">Div 5</div>

我尝试了以下脚本：

$(document).ready(function () {
    var repeat = function () {
        $('#1').show();
        $('#1').delay(1000).hide();
        $('#2').hide();
        $('#2').delay(1000).show();
        $('#2').delay(3000).hide();
        $('#5').hide();
        $('#5').delay(3000).show();
        $('#5').delay(6000).hide();
    };
    setInterval(repeat, 6000);
});

但是我可以一次看到所有的div。在最初的10秒钟后，所有内容都会隐藏起来，脚本已完成。非常感谢这里的任何指针。

小提琴

如果我理解正确，您正在寻找 fadeToggle()

$(document).ready(function() {
  var repeat = function() {
    $('#1').fadeToggle(1000);
    $('#2').fadeToggle(1000);
    $('#5').fadeToggle(1000);
  };
  setInterval(repeat, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Div 1</div>
<div id="2">Div 2</div>
<div id="5">Div 5</div>

如果要一一显示元素，则可以使用完整的回调fadeToggle()：

$(document).ready(function() {
  var repeat = function() {
    $('#1').fadeToggle(1000, function() {
      $('#2').fadeToggle(1000, function() {
        $('#5').fadeToggle(1000);
      });
    });

  };
  setInterval(repeat, 4000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="1">Div 1</div>
<div id="2">Div 2</div>
<div id="5">Div 5</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。