jQuery中的函數可以遍歷元素並顯示/隱藏？

Question

我有一個字符串，我想把它分成一組<p>元素，創建一個函數來顯示/隱藏每一個延遲，然後在用戶按下按鈕時重新運行函數。

到目前爲止，我把字符串和分裂成結果<p>但我努力循環它們，並顯示/隱藏每一個延遲尚未成功。

Here's a fiddle:

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

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

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

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>