jQuery在mouseclick上创建div

在我的网站上，我希望能够在单击鼠标时创建div，应该在鼠标单击的位置创建div。 然后我希望能够动画这个div从屏幕底部飞出来。

到目前为止，我有这个jQuery代码，它只是在点击时显示一个div，但是我希望它在每次显示时都能在屏幕上显示动画。 任何人都可以帮助我。

$("#divId").hide(); $(".holder").click( function(event) { $("#divId").show().css( {position:"absolute", top:event.pageY, left: event.pageX}) }); 

和JSfiddle： http ： //jsfiddle.net/VZY6C/

Answer 1

您可以轻松使用jquerys动画function。

 $(".holder").click( function(event) { $("#divId").show().css( {position:"absolute", top:event.pageY, left: event.pageX}).stop().animate({ top: 800 }, 1000); }); 

在此示例中，您将top属性从原来的动画设置为800，在1秒内。

然后，如果你想让它消失，它会离开盒子，你只需要放置位置：相对; 和溢出：隐藏;

小提琴： http ： //jsfiddle.net/CL3Lu/

编辑：刚刚将stop（）函数添加到链中。 这将停止当前正在运行的动画。

新小提琴： http ： //jsfiddle.net/Bq3Dc/

如果您快速进行多次点击，则可以看到差异。