Question

我有一个字符串，我想将其拆分为一组<p>个元素，创建一个函数来显示/隐藏每个元素的延迟，然后在用户按下按钮时重新运行该函数。 / p>

到目前为止，我接受了字符串并将其拆分为结果<p>，但是我在循环上展开/隐藏每个字符串的努力都没有成功。

HTML：

<div>
    <span>Hello! Lorem ipsom dolor set amit.</span>
    <div class="result"></div>
</div>
<button>Run</button>

JS：

var words = $("span").text();
var split = words.split(" ");
for(var i = 0; i < split.length; i++) {
    $(".result").append("<p>" + split[i] + "</p>");
};

简而言之：我希望它看起来像：

<p1>.show(1000) -> <p1>.hide() <p2>.show(1000) -> <p2>.hide() <p3>.show(1000)...

Answer 1

尝试使用.queue()，.fadeIn()，.fadeOut()

＆＃13;

var words = $("span").text(), result = $(".result")
, split = words.split(" ");
for (var i = 0; i < split.length; i++) {
  result.append("<p style=display:none;padding:2px;> " + split[i] + " </p>");
};
$("button").click(function() {
  if (result.queue("cycle").length === 0) {
    result.queue("cycle", $.map($("> p", result), function(el, i) {
      return function(next) {
        $(el).fadeIn(1000, function() {
          $(this).fadeOut(next)
        })
      }
    })).dequeue("cycle")
  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
  <span>Hello! Lorem ipsom dolor set amit.</span>
  <div class="result"></div>
</div>
<button>Run</button>

＆＃13;

Answer 2

使用jQuery承诺的一种非常简单的方法：

$('button').on('click', function() {
  $('.result').empty(); //reset
  var words = $("span").text();
  var split = words.split(" ");
  for (var i = 0; i < split.length; i++) {
    var p = $("<p>" + split[i] + "</p>");
    p.appendTo('.result');
  };

  var p = $.Deferred().resolve().promise();
  $('.result p').each(function(i, par) {
    var $par = $(par);
    p = p.then(function() {
      $par.show(500).delay(500).hide(500);
      return $par.promise();
    });
  });
});

.result {
  height: 20px;
  }

.result p {
  margin: 0px;
  display : none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <span>Hello! Lorem ipsom dolor set amit.</span>
  <div class="result"></div>
</div>
<button>Run</button>

在jQuery中的函数循环元素和显示/隐藏？

2 个答案: