-1

http://ballsohard.co.uk/bshmfwfm/stack.html#

上記URLをクリックしてください。2 つの異なる表示オプションを持つメニューがあります。「カテゴリ」をクリックすると、2 番目のメニュー表示が表示されます。オプションのいずれかをクリックすると、メニューが右にスライドし、新しいメニューが左からスライドインするトランジションを作成しようとしています。

私はこれにさまざまな jQuery メソッドを調べ、いくつかの jsfiddle の例で遊んでみましたが、それを理解することはできません。

これを行うには助けが必要です

4

3 に答える 3

2

このサイトには、要素をスライドさせるための優れたチュートリアルがあります。

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

于 2012-12-05T22:47:33.170 に答える
0

私はJQueryをまったく使わずに同じことをすることができました...

function hMove(element, endPos, duration) {
    // element = DOM element to move
    // endPos = element.style.left value for the element in its final position
    // duration = time in ms for the animation

//    var leftPos = element.style.left.replace(/px/,"");  // Get the current position of the element
    var leftPos = window.getComputedStyle(element,null).getPropertyValue("left").replace(/px/,"");
    var animStep = (leftPos - endPos) / (duration / 10);  // Calculate the animation step size
    var direction = ( leftPos > endPos ) ? "left" : "right";  // Are we moving left or right?

    function doAnim() {  // Main animation function

        leftPos = leftPos - animStep;  // Decrement/increment the left position value

        element.style.left = leftPos + "px";  // Apply the new left position value to the element

        // Are we done yet?
        if ((direction == "left" && leftPos <= endPos) || (direction == "right" && leftPos >= endPos)) {
            clearInterval(animLoop);  // Stop the looping
            element.style.left = endPos + "px";  // Correct for any fractional differences
        }
    } // and of main animation function

    var animLoop = setInterval(doAnim, 10); // repeat the doAnim function every 10ms to animate
}

このソリューションの完全な動作デモ (非表示/表示のトグル機能を追加) は次のとおりです: http://jsfiddle.net/47MNX/16/

そのままの JavaScript を使用しており、非常に柔軟で適応性が高いはずです。

-FM

于 2014-03-28T12:57:34.047 に答える
0

ナビゲーション要素を position:relative コンテナ内で position:absolute に設定し、.animate()を使用して「左」または「右」プロパティを変更して画面外に移動します。

于 2012-12-05T22:34:33.753 に答える