1

以前は存在しなかったdivを表示し、Jqueryを使用するときにそれを削除する場合のベストプラクティスは何か疑問に思っています。ライトボックスやソートのようなモーダルポップアップボックスのように...

私のページにはポップアップショッピングカートがあり、それはある意味で機能します。元々、ショッピングカートを0にフェードさせていました。しかし、そうすると、下のhtmlをクリックできなくなります...そこで、ショッピングカートのdivを右に移動して、フェードさせました。次に、「カート」ボタンをクリックすると、すべてのスタイルが再び通常にリセットされます。もっときれいな方法があるのだろうかと思っていました。divをフェードアウトしてから、divを無効にして、下のhtmlをクリックできるようにします。したがって、ポップアップdivを大量のcssで移動する必要はありません。

これが私の現在のコードです：

document.getElementById("shopping-container").style.position="absolute";
document.getElementById("shopping-container").style.left="2000px";

$(".open").click(function() {
$("#shopping-container").stop().animate({"opacity": "1"}, "fast", function(){
    document.getElementById("shopping-container").style.position="relative";
    document.getElementById("shopping-container").style.top="150px";
 });
});

$(".close").click(function() {
$("#shopping-container").stop().animate({"opacity": "0"}, "fast", function(){
    document.getElementById("shopping-container").style.position="absolute";
    document.getElementById("shopping-container").style.left="2000px";
 });
});
4

2 に答える 2

5

画面外に移動する代わりに、style.display="none"を設定します

于 2012-11-19T05:52:14.257 に答える
1

最初はdivを非表示にしてください...

<div id="shopping-container" style="display:none;">
......
Your elements here
......
</div>

$(".open").click(function() {
$("#shopping-container").stop().animate({"opacity": "1"}, "fast", function(){
    $("shopping-container").show();
 });
});


$(".close").click(function() {
$("#shopping-container").stop().animate({"opacity": "0"}, "fast", function(){
    $("shopping-container").hide();
 });
});
于 2012-11-19T06:00:13.710 に答える