0

作成しようとしている Web ページには、双方向のスライド アニメーションがあります。ただし、アニメーションは部分的にしか機能していません。より正確に言うと、アニメーションは上にスライドしますが、途中までしかスライドしません。これが私のJavaScriptです：

function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.top);
if (layerPosition > 315) {
    hiddenLayer.style.top = (layerPosition - 5) + "px";
    setTimeout("showLayer()", 20);
}
}

function hideLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.top);
if (layerPosition <= 315) {
    hiddenLayer.style.top = (layerPosition + 5) + "px";
    setTimeout("hideLayer()", 20);
}
}

hideLayer 関数の 4 行目で、条件を <= 315 に設定していることに注意してください。これは、条件を 315 に設定すると、トリガー要素をクリックした後、要素がいずれかの方向に数ピクセルしか移動しないためです。アニメーション専用の HTML 要素は次のとおりです。

<div id="mainbutton" onclick="showLayer('mainmenu'); hideLayer('mainmenu')"></div>
<div id="mainmenu" style="position: absolute; top: 690px; left: 9px;"  
onclick="showLayer('mainmenu')">&nbsp;</div>

そして、これらのスタイルは次のとおりです。

div#mainmenu { width: 600px; height: 350px; border-style: solid; background-color: 
rgb(0, 0, 0) ; border-width: 3px; border-top-right-radius: 7px; border-top-left-
radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px; height: 
28px; border-style: solid; border-color: rgb(255, 255, 255); border-width: 1px; border-
radius: 4px; }

そしてフィドル：http://jsfiddle.net/JAtLA/

他の方法ではアニメーションが機能しないため、一部のスタイルを HTML とインラインで配置する必要がありました。最初は、問題は hideLayer 関数の if 条件だけにあると思っていました。しかし、それを微調整した後、私は今ではよくわかりません。

4

2 に答える 2

2

それがあなたが望むものかどうかはわかりませんが、ここに私の答えがあります：

コードにロジックの問題があります。あなたが書いた

if(layerPosition<=315){ hiddenLayer.style.top = (layerPosition + 5) + "px";}

頂点が 315 以下の場合、頂点が 316 に到達するまで増加するということです。しかし、最初の関数では、315 で停止するように言っています。つまり、関数 hideLayer は、1 ピクセルから移動するだけです。

<400解決策は、代わりに<=315(または 400 以上の何か)を伝えることです。

ここに変更されたフィドルがあります: http://jsfiddle.net/7egr7/2/

于 2012-06-07T12:15:59.047 に答える
1

(layerPosition <= 315) の場合、「hideLayer」は停止するようです。それは本当にあなたが望むものですか？1回の反復後に発生します。

y 軸が画面を下に移動することに注意してください (つまり、ゼロが上になります)。

ボタンをクリックすると、showLayer が呼び出され、次に hideLayer が呼び出されます。メニューが開いている場合 (つまり、layerPosition > 315)、showLayer は何も実行せず (意図したとおりだと思います)、hideLayer はメニューを 5 つ上げます (315 から 320 に)。hideLayer (layerPosition <= 315) の次の反復では false になるため、何もしません。

これを試して：

var open = false;

function showLayer() {
    if (open)
        return;

    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.top);
    if (layerPosition > 315) {
        hiddenLayer.style.top = (layerPosition - 5) + "px";
        setTimeout("showLayer()", 20);
    }
    else {
        open = true;
    }
}

function hideLayer() {
    if (!open)
        return;

    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.top);
    if (layerPosition <= 685) {
        hiddenLayer.style.top = (layerPosition + 5) + "px";
        setTimeout("hideLayer()", 20);
    }
    else {
        open = false;
    }
}

html では、何かを行う前に、物が開いているか閉じているかを確認したいと思います。

<div id="mainbutton" onclick="if (!open) { showLayer('mainmenu'); } else { hideLayer('mainmenu'); }">

しかしlayerPosition <= 685、本当に重要な変更はこれだけです。

于 2012-06-07T12:17:23.580 に答える