需要解释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将被删除，因此您可以看到完整的段落。

请参阅演示动画期间附带的代码截图。