jquery - jQuery create div on mouseclick

Question

On my site I want to be able to create a div when I click my mouse, the div should be created next to where the mouse clicked. I then want to be able to animate this div to fly off the bottom of the screen.

So far I have this jQuery code that simply shows a div on click, however I want it to animate down and off screen each time it is displayed. Can anybody help me out here.

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

and a JSfiddle: http://jsfiddle.net/VZY6C/

Answer 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/

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