jQuery在鼠标点击时创建div答案

【问题标题】：jQuery create div on mouseclickjQuery在鼠标点击时创建div
【发布时间】：2013-11-07 16:00:21
【问题描述】：

在我的网站上，我希望能够在单击鼠标时创建一个 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/

【问题讨论】：

您尝试过的用于制作动画的代码在哪里？

标签： jquery click jquery-animate

【解决方案1】：

您可以轻松使用 jquery 的动画功能。

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

在本例中，您可以在 1 秒内将 top 属性从原来的值设置为 800。

然后，如果您希望它消失，它会离开您只需放置位置的框：相对；和溢出：隐藏；

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

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

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

如果您快速点击多次，您会看到差异。

【讨论】：