需要解释的jQuery .Show（）效果闪烁

Question

是否有人可以解释为什么闪烁上这种影响发生：http://codepen.io/theclarkofben/pen/xKhsd

我完全知道，在CSS中声明的利润率导致发生问题，但我不明白为什么会发生的确切技术原因。例如：

我已经找到解决方案的问题，例如;创建父容器并将边距应用于该父容器。然而，我不明白为什么解决方案有效，因为我从技术上不明白哪里出了问题。

这篇文章是在线搜索的结果。我找不到解释，只有解决方案。

谢谢你的时间。

$(function() { 
// run the currently selected effect 
function runEffect() { 
    // get effect type from 
    var selectedEffect = "clip"; 

    // most effect types need no options passed by default 
    var options = {}; 
    // run the effect 
    $("#show_effect").show(selectedEffect, options, 500, callback); 
}; 

//callback function to bring a hidden box back 
function callback() { 
    setTimeout(function() { 
    $("#show_effect:visible").removeAttr("style").fadeOut(); 
    }, 1000); 
}; 

// set effect from select menu value 
$("#about_me_button").click(function() { 
    runEffect(); 
}); 

$("#show_effect").hide(); 
}); 

。

<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script> 
<button id="about_me_button">About Me</button> 
<div id="show_effect" class="about_me"> 
    <p>Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus. Accumsan deseruisse eos te, vix nibh omnis ei.Quis vivendum ei vim, ut alia essent persequeris ius. Et sed diam harum consul, ut usu admodum appareat. In odio tale per, vel eu semper feugait vituperatoribus.</p> 
</div> 

。

.about_me { 
    width: 600px; 
    height: 225px; 
    margin-right: -300px; 
} 

Answer 1

当.show（）函数运行时，.about_me div被包装在一个临时包装<div class="ui-effects-wrapper">中。这取决于现有的.about_me div的高度和宽度。我想象的负边距正确导致这个新的包装div的宽度是300px而不是原来的600px。此外，包装div的溢出设置为隐藏。所以当内容加载时，它被切断。然后当演出动画完成时，临时div将被删除，以便您看到完整的段落。

在演出动画中查看附件的截图。