jquery - 为什么 jQuery.animate 位置不起作用？

Question

我想用 jQuery对css位置属性进行动画处理。position : relativeposition : 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 演示

非常感谢您的帮助！
此致。

Answer 1

Position比例本身是不可动画的。您可以更改left,top和bottom值以获得移动效果。

Answer 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);
    });
});

Answer 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();
    });
});

Answer 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;
   }