0

私のサイトでは、マウスをクリックしたときに div を作成できるようにしたいのですが、マウスをクリックした場所の横に div を作成する必要があります。次に、この div をアニメーション化して画面の下部から飛び出させたいと考えています。

これまでのところ、クリック時に div を表示するだけの jQuery コードがありますが、表示されるたびに画面を上下にアニメーション化する必要があります。誰か助けてくれませんか。

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

および JSfiddle: http://jsfiddle.net/VZY6C/

4

1 に答える 1

4

jquerys animate 関数を簡単に利用できます。

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

この例では、1 秒以内に top プロパティを 800 までアニメーション化します。

そして、それを消したい場合は、position: relative; を置いたボックスをそのままにしておきます。およびオーバーフロー: 非表示;

フィドル: http://jsfiddle.net/CL3Lu/

編集: stop() 関数をチェーンに追加しました。これにより、現在実行中のアニメーションが停止します。

新しいフィドル: http://jsfiddle.net/Bq3Dc/

複数のクリックをすばやく行うと、違いがわかります。

于 2013-10-28T18:29:44.230 に答える