为什么 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

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

【问题讨论】：

标签： jquery jquery-animate position css-position

【解决方案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;
   }

【讨论】：