jQuery在mouseclick上创建div [英] jQuery create div on mouseclick

问题描述

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

到目前为止，我有这个jQuery代码，只是显示一个点击的div，但是我想让它动画下来和关闭屏幕每次显示。任何人都可以在这里帮助我。

  $（＃divId）。 
 $（。holder）。click（function（event）{
 $（＃divId）。show（）。css（{position：absolute，top：event.pageY， left：event.pageX}）
}）; 
  

和一个JSfiddle：
http://jsfiddle.net/VZY6C/

解决方案

轻松使用jquerys动画功能。

  $（。holder b $（＃divId）。show（）。css（{position：absolute，top：event.pageY，left：event.pageX}）stop（）。animate（{
 top：800 
}，1000）; 
}）; 
 

在此示例中，您将top属性从其属性动画化为800，在1秒内。 / p>



然后如果你想让它消失hwen它离开盒子你只是把position：relative;和overflow：hidden;

fiddle： http：// jsfiddle。 net / CL3Lu /

编辑：
只是在链中添加了stop（）函数。这会停止当前正在运行的动画。

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

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

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/

解决方案

You can easily make use of jquerys animate function.

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

In this example you animate the top property from what it is, to 800, within 1 second.

And then if you want it to dissapear hwen it leaves the box you just put position: relative; and overflow: hidden;

fiddle: http://jsfiddle.net/CL3Lu/

Edit: Just added the stop() function to the chain. This stops the currently running animation.

New fiddle: http://jsfiddle.net/Bq3Dc/

You can see the difference if you make multiple clicks fast.

这篇关于jQuery在mouseclick上创建div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！