jquery - 将 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

我只是设法在不使用 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，并且应该非常灵活和适应性强。

-调频

Answer 3

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