jQuery 将固定或绝对定位的元素向左或向右移动

Posted

技术标签:

【中文标题】jQuery 将固定或绝对定位的元素向左或向右移动【英文标题】:jQuery Move a fixed or absolutely positioned element to the left or right 【发布时间】:2012-11-26 19:30:48 【问题描述】:

我正在玩一个想法,我想模​​仿 facebook 移动应用程序,其中主要容器元素物理地向左或向右移动。但是我已经尝试了几种方法,我想要移动的元素似乎是调整大小而不是移动,我不确定它是什么或为什么这样做而不是按照我期望的方式移动。

注意我已经尝试将主元素作为固定元素和绝对元素。我也尝试过在 javascript 中只使用“left”或“right”而不是“marginLeft”或“marginRight”。

所以我想知道我做错了什么?

http://jsfiddle.net/4GF8c/

CSS:

html, bodymargin:0;padding:0;width:100%;height:100%;
#wrap_mainbackground-color:gray;position:fixed;top:0;left:0;right:0;bottom:0;z-index:10;
#wrap_bottom_leftbackground-color:aqua;width:50%;float:left;
#wrap_bottom_rightbackground-color:green;width:50%;float:right;​

javascript:

    var isMenuOpen = false;
    $(document).ready(function()
    
    //code
    );
    $('#menu_left_trigger').click(function(e)
    
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        
            isMenuOpen = true;
            $mainEle.animate(marginLeft:"10%", 1000);
        
        else
        
            isMenuOpen = false;
            $mainEle.animate(marginLeft:"0", 1000);
        
    );
    $('#menu_right_trigger').click(function(e)
    
        e.preventDefault();
        var $mainEle = $('#wrap_main');
        if(isMenuOpen == false)
        
            isMenuOpen = true;
            $mainEle.animate(marginRight:"10%", 1000);
        
        else
        
            isMenuOpen = false;
            $mainEle.animate(marginRight:"0", 1000);
        
    );
​

html:

<div id="wrap_main">
    <a href="javascript:void(0);" id="menu_left_trigger">Menu</a><br>
    <a href="javascript:void(0);" id="menu_right_trigger">Sub Menu</a>
</div>
<div id="wrap_bottom_left">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>
<div id="wrap_bottom_right">
    <ul>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
        <li>Something</li>
    </ul>
</div>​

【问题讨论】:

【参考方案1】:

啊,好吧。我刚刚解决了我自己的问题。所以我会在这里为那些尝试类似的人分解它。

所以第一个逻辑。我的内容包含“主”元素,如果你称之为,是绝对/固定位置。这基本上将其与 DOM 分离。意思是基于百分比的高度和宽度不起作用。因此,要创建固定/绝对的全高、全宽元素的效果。我需要告诉元素属性 left:right:top:bottom: (css) 全部设置为零,因此 4 个点将在所有方面都接触“0”,基本上将其拉伸以使很合适。

所以。那是我的问题。通常移动一个固定元素或绝对定位的元素,你会完全按照我的尝试去做。然而,在您设置绝对或固定的几乎所有原因中,您可能只设置左上或右上,或分别设置相同但底部。

因此,由于元素的样式设置为保持在所有四个点,当我想在任一方向移动元素 x% 或这么多像素时。我必须补偿两个方向,所以如果我想正确使用元素,我需要做left:10%;right-10% 来补偿两边的移动。

最终我最终做的是改变,现在整个元素都在移动,在任何一个方向上都有正负,而不是无意中调整大小,因为我只告诉一侧移动而不是另一侧

希望这对未来的玩家有意义

【讨论】:

【参考方案2】:

您需要修复“isMenuOpen”状态。这不是二元测试,而是三向测试。它可以是左开式、右开式或封闭式。您的函数需要能够解释这一点,否则它会在 wrap_main div 的一侧设置动画而不设置另一侧。 您需要检查当前偏移量并使用它来计算位置应该在哪里。见这里:using jQuery .animate to animate a div from right to left?

对于绝对定位的元素,我建议使用动画左/右定位而不是边距,因为边距可以解释为框模型的一部分(在某些浏览器中)并影响页面上其他项目的布局。执行此操作时,请务必确保链接不会以动画形式出现在视野之外。

编辑:我没有玩够小提琴就解雇了我的答案。这应该使您朝着正确的方向前进。对不起!

【讨论】:

isMenuOpen 逻辑不完整,据我所知,如果任一侧打开(或当时正在打开),我打算设置一个停止点。然而,在我到达那一点之前。我意识到当我点击从右侧打开的那个时,容器中的内容保持在屏幕上的位置,而容器调整大小。这不是愿望。至于margin vs left by itself,我也试过了。但是我不会发布相同代码的不同版本来表明我这样做了,尽管我确实在我的原始帖子中提到了它

以上是关于jQuery 将固定或绝对定位的元素向左或向右移动的主要内容,如果未能解决你的问题,请参考以下文章

将数组元素向左或向右移动一个函数的功能

在 PyQt5 中将 QsciScintilla 的文本光标向左或向右移动

向左或向右移动 UINavigationBar 标题的文本

检测用户何时向左或向右滑动以在 WKWebView 上前后移动

动画绝对定位的div,但如果条件为真则停止?

jquery怎么实现手机触屏图片滑动代码,手向左或向右滑动,图片滑动。不滑动的时候图片自动循环滚动