块之间的过渡正在丢失元素答案

【问题标题】：Transitioning between blocks is losing elements块之间的过渡正在丢失元素
【发布时间】：2015-10-28 03:54:45
【问题描述】：

我正在 blockUI 中的块之间进行转换，但是在解除阻塞后它会从 DOM 中完全删除第一项的元素，有没有办法解决这个问题？

$(function () {
    $("#step1").click(function() {
        $.blockUI({ message: $("#test1") });
    });
    
	$("#step2").click(function() {
        $.unblockUI();
        $.blockUI({ message: $("#test2") });
    });
    
	$("#step3").click(function() {
        $.unblockUI();
    });
    
	$("#step4").click(function() {
        if ($("#test1").length > 0)
            $.blockUI({ message: "test 1 still exists in DOM" });
        else
            $.blockUI({ message: "cannot find test 1 in DOM" });
    });      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.66.0-2013.10.09/jquery.blockUI.min.js"></script>
<input type="button" id="step1" value="1. Show first block" />
<div id="test1">test 1<br />
    <input type="button" id="step2" value="2. Switch to second block" /></div>
<div id="test2">test 2<br />
    <input type="button" id="step3" value="3. Hide all blocks" /></div>
<input type="button" id="step4" value="4. See if test1 exists" />

【问题讨论】：

标签： blockui jquery-blockui

【解决方案1】：

我发现问题与淡出有关，如果您愿意，请随时删除问题。

$(function () {
    $("#step1").click(function() {
        $.blockUI({ message: $("#test1") });
    });
    
	$("#step2").click(function() {
        $.unblockUI({ fadeOut: 0});
        $.blockUI({ message: $("#test2") });
    });
    
	$("#step3").click(function() {
        $.unblockUI();
    });
    
	$("#step4").click(function() {
        if ($("#test1").length > 0)
            $.blockUI({ message: "test 1 still exists in DOM" });
        else
            $.blockUI({ message: "cannot find test 1 in DOM" });
    });      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.66.0-2013.10.09/jquery.blockUI.min.js"></script>
<input type="button" id="step1" value="1. Show first block" />
<div id="test1">test 1<br />
    <input type="button" id="step2" value="2. Switch to second block" /></div>
<div id="test2">test 2<br />
    <input type="button" id="step3" value="3. Hide all blocks" /></div>
<input type="button" id="step4" value="4. See if test1 exists" />

【讨论】：