将div水平滑出屏幕

Question

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

请点击上面的网址。我有一个菜单，有2种不同的显示选项。点击“类别”将显示第二个菜单显示。我正在尝试创建一个过渡，如果我单击其中一个选项，菜单将向右滑动，新菜单将从左侧滑入。

我已经看过各种各样的jQuery方法，并且已经使用了一些jsfiddle示例，但我无法掌握它。

我需要一些帮助才能做到这一点

Answer 1

这个网站有很棒的滑动元素教程：

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

Answer 2

将导航元素设置为位置：绝对位置：相对容器，并使用.animate()更改“左”或“右”属性以将其移出屏幕。

Answer 3

我刚刚设法在没有的情况下使用相同的使用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