创建一个在点击网页时弹出的区域

Question

我基本上想要在弹出的网页中创建一个区域（即在点击某个内容时，它与网页的一部分重叠）。 好吧，所以我所做的是创建一个div并将其z-index设置为大于所有其他元素。 然后我用jQuery

$("#myElement").hide();

在开始时使用jQuery，我使用onclick进行显示。到目前为止，一切都很完美，但这种方法缺乏流动性。 我的流动性是指该区域的显示和隐藏不会产生任何影响。 所以我的问题是，这种方法是否正确？此外，我可以添加某种动画来使显示和隐藏更有趣吗？

Answer 1

阅读this。这应该让你开始让事情变得更有趣。

这是一个基本的例子，可以增加一些效果。

$('button').click(function(){
$('div').show('slow');
});

VIEW DEMO

Answer 2

查理关于CSS3过渡的建议很好，因为它们可能提供最灵活的动画细节，并且通常比jQuery动画更流畅。

只有与它们相关的技巧是，您无法将元素设置为display: none的动画，并注意jQuery的.hide()设置display到{{1}意思是你不能将动画与这些jQuery方法结合起来）。但是，有很多其他方法可以做到这一点。例如，请参阅讨论该问题的this blog post。

你也可以拥有＆＃34;隐藏＆＃34;国家在屏幕外翻译了几千个像素，并且＃34;可见＆＃34;状态设置为none。请注意，如果您使用此解决方案，您可能需要为转换计时功能使用某种自定义贝塞尔曲线（this tool可能对此有用）。

Answer 3

显示元素的方法有很多，CSS显示属性设置为none，例如

.show()

$('#myElement').show(600, 'linear');

.fadeIn()

$('#myElement').fadeIn(600, 'linear');

.fadeTo()

$('#myElement').fadeTo(600, 1.0, 'linear');

但如果您想要一些特殊的动画，那么请使用CSS＆amp; jQuery，例如

#myElement {
  background: #999;
  position: absolute;
  display: none;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;    
}

---

.animate()

$('#myElement').show().stop().animate({ width: '200px', height: '200px', margin: '-125px 0 0 -125px' }, 600, 'easeOutBounce');

FIDDLE for example above

*注意：有关宽松效果的完整列表，请点击here