为啥 jQuery.animate 位置不起作用？

Posted 2023-05-08

【中文标题】为啥 jQuery.animate 位置不起作用？

【英文标题】：Why jQuery.animate position doesn't work?为什么 jQuery.animate 位置不起作用？

【发布时间】：2013-06-29 15:10:17

【问题描述】：

我想用 jQuery .animate css position property 从 position : relative 到 position : absolute。

我在 div 容器内有一个小 div，我想在单击按钮以适应窗口时展开这个 div。

html：

<div id="container"> <!-- div with position:relative -->
    <div id="content"> <!-- i want to expand this div using position:absolute to extract it from the container and to give width and height 100% -->
        <button id="full">Full</button>
        <button id="collapse">Collapse</button>        
    </div>
</div>

我与jQuery().animate 合作但不起作用，我与jQuery().css 合作并且有效，但不是我想要的。

这就是我所做的：

$(document).ready(function () 

$("#collapse").hide();

$("#full").bind("click", function (e) 
    e.preventDefault();
    $("#content").animate(
        width: "1000px",
        height:"1000px",
        top:0,
        left:0
    , 500).css("overflow": "visible", "position":"absolute");
    $("#full").hide(100);
    $("#collapse").show(100); // can i use $("#collapse").css("display","block"); ?
);

$("#collapse").bind("click", function (e)        
    e.preventDefault();
    $("#content").animate(
        width: "400px",
        height: "300px",
    , 500).css("overflow": "visible", "position":"relative");
    $("#full").show(100);
    $("#collapse").hide(100);
);
);

JsFiddle Demo

非常感谢您的帮助！ 最好的问候。

【参考方案1】：

Position 属性本身是不可动画的。 您可以更改left、top 和bottom 的值以获得运动效果。

【参考方案2】：

你想要这样的东西吗？演示http://jsfiddle.net/yeyene/TJwsM/6/

$(document).ready(function () 
    $("#collapse").hide();
    var p = $('#content').position();
    $("#full").bind("click", function (e) 
        e.preventDefault();
        $("#content").animate(
            width: $(window).width(),
            height:$(window).height(),
            top: '0px',
            left: '0px'            
        , 500);
        $("#full").hide(100);
        $("#collapse").show(100);
    );

    $("#collapse").bind("click", function (e)        
        e.preventDefault();
        $("#content").animate(
            width: "400px",
            height: "300px",
            top: p.top+'px',
            left: p.left+'px'                        
        , 500);
        $("#full").show(100);
        $("#collapse").hide(100);
    );
);

【讨论】：

非常感谢，但我想为位置设置动画，因为当我单击“完整按钮”时，div 会移动到顶部而没有任何效果，然后开始动画。你注意到了吗？

啊对，我再测试一下能不能动画。

再次检查我的更新答案和演示，现在你想要的动画正在工作（但不是第一次），我也不知道为什么。但是在第一次点击之后，它工作得很好，顶部和左侧的动画。

【参考方案3】：

这是你提到的问题的简单解决方案，重写：

http://jsfiddle.net/vj36r/

HTML：

<div id="container">
    <div id="content">
        <button id="full">Full</button>
        <button id="collapse">Collapse</button>
    </div>
</div>

CSS：

div#container 
    position:relative;
    width:400px;
    height:600px;
    background-color:#EEFFEE;

div#content 
    position:relative;
    background-color:#FFEEEE;
    overflow:visible;

JS：

$(document).ready(function () 
    $("#collapse").hide();
    $("#content").animate(
        top: 40,
        marginLeft: 10,
        marginRight: 10,
        marginBottom: 10
    , 0);
    $("#full").bind("click", function (e) 
        e.preventDefault();
        $("#content").animate(
            top: 0,
            marginLeft: 0,
            marginRight: 0,
            marginBottom: 0
        , 500);
        $("#full").toggle();
        $("#collapse").toggle();
    );
    $("#collapse").bind("click", function (e) 
        e.preventDefault();
        $("#content").animate(
            top: 40,
            marginLeft: 10,
            marginRight: 10,
            marginBottom: 10
        , 500);
        $("#full").toggle();
        $("#collapse").toggle();
    );
);

【讨论】：

非常感谢，但这不是我想要的。我说我想使用 position:absolute 扩展容器内的 div 以 从容器中提取它 并提供 100% 的宽度和高度。您的示例仅对边距进行动画处理。非常感谢您的帮助！ :)

改变元素显示类型的视觉效果无法动画化。因此，从相对到固定将“弹出”元素的宽度和高度。如果您真的想这样做，您可以获得转换后的#content 的绝对位置/边界，在设置其 position=fixed 后立即将其设置在 #content 上，然后将其设置为视口的全宽。但是，当这种“模态窗口”效果可以通过其他更简单的方式实现时，似乎有点多。我不知道项目的背景，当然......

【参考方案4】：

您可以添加一个更改 div 位置的类，并在单击元素时使用 .addClass 和 .removeClass 方法激活该类。

$(document).ready(function () 

$("#collapse").hide();

$("#full").bind("click", function (e) 
    e.preventDefault();
    $(this).addClass("position");
    $("#content").animate(
    width: "1000px",
    height:"1000px",
    top:0,
    left:0
    , 500).css("overflow": "visible", "position":"absolute");
    $("#full").hide(100);
    $("#collapse").show(100); // can i use $("#collapse").css("display","block"); ?
);

$("#collapse").bind("click", function (e)        
     e.preventDefault();
     $(this).addRemove("position");
     $("#content").animate(
        width: "400px",
        height: "300px",
        , 500).css("overflow": "visible", "position":"relative");
    $("#full").show(100);
    $("#collapse").hide(100);
);
);




  css
  .position
      position: absolute;