La transition entre les blocs est en train de perdre des éléments

Question

Je fais la transition entre les blocs dans blockUI, mais après le déblocage il supprime complètement les éléments du premier élément du DOM, y a-t-il un moyen de contourner ce problème?

$(function() { 
 
    $("#step1").click(function() { 
 
     $.blockUI({ message: $("#test1") }); 
 
    }); 
 
    
 
\t $("#step2").click(function() { 
 
     $.unblockUI(); 
 
     $.blockUI({ message: $("#test2") }); 
 
    }); 
 
    
 
\t $("#step3").click(function() { 
 
     $.unblockUI(); 
 
    }); 
 
    
 
\t $("#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" />

Answer 1

Je trouve la question était liée à la fade out, ne hésitez pas à supprimer la question si vous le souhaitez.

$(function() { 
 
    $("#step1").click(function() { 
 
     $.blockUI({ message: $("#test1") }); 
 
    }); 
 
    
 
\t $("#step2").click(function() { 
 
     $.unblockUI({ fadeOut: 0}); 
 
     $.blockUI({ message: $("#test2") }); 
 
    }); 
 
    
 
\t $("#step3").click(function() { 
 
     $.unblockUI(); 
 
    }); 
 
    
 
\t $("#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" />