0

css position プロパティをjQueryで.animateしたい。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 デモ

助けてくれてありがとう！
よろしくお願いします。

4

4 に答える 4

2

Position縦横比自体はアニメートできません。left、topおよび値を変更してbottom、動きの効果を得ることができます。

于 2013-07-02T09:55:32.227 に答える
1

あなたはそのようなものが欲しいですか？デモ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);
    });
});
于 2013-07-02T10:03:51.377 に答える
0

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;
   }
于 2016-06-15T13:59:15.690 に答える
0

これは、あなたが言及した問題の簡単な解決策です。

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();
    });
});
于 2013-07-02T10:30:51.297 に答える