Защо позицията на jQuery.animate не работи?

Искам да .animate css свойство за позиция от position : relative до position : absolute с jQuery.

Имам малък 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

Благодаря ви много за всяка помощ!
Най-добри поздрави.


jquery css-position position jquery-animate
person Mustapha Aoussar    schedule 02.07.2013    source източник

Отговори (4)


arrow_upward
1
arrow_downward

Искате ли нещо такова? ДЕМО 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);
    });
});
person yeyene    schedule 02.07.2013
comment
Благодаря ви много, но искам да анимирам позицията, защото когато щракна върху бутона Пълен, div се премества най-горе без никакъв ефект и след това започва анимация. забелязахте ли - person Mustapha Aoussar; 02.07.2013
comment
А, да, нека тествам отново дали може да анимира или не. - person yeyene; 02.07.2013
comment
Проверете моя отговор за актуализация и демонстрация отново, сега анимацията, която искате, работи (но не от първия път), също не съм сигурен защо. Но след първото щракване работи добре, горната и лявата анимация. - person yeyene; 03.07.2013

arrow_upward
2
arrow_downward

Самите свойства на Position не могат да се анимират. Можете да промените стойностите left, top и bottom, за да получите ефект на движение.

person raam86    schedule 02.07.2013

arrow_upward
0
arrow_downward

Това е просто решение на проблема, който споменавате, пренаписване:

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();
    });
});
person KVarmark    schedule 02.07.2013
comment
Благодаря ви много, но това не е това, което искам. Казах, че искам да разширя div вътре в контейнера с помощта на position:absolute, за да го извлека от контейнера и да дам ширина и височина 100%. Вашият пример анимира само полета. Благодаря ви много за всяка помощ! :) - person Mustapha Aoussar; 02.07.2013
comment
визуалният ефект от промяната на типа дисплей на елемента не може да бъде анимиран. По този начин преминаването от относително към фиксирано ще изскочи ширината и височината на елемента. Ако НАИСТИНА искате да го направите, можете да получите преобразуваната абсолютна позиция/граници на #content, да я зададете на #content веднага след като зададете позицията му=фиксирана, и след това да я анимирате до пълната ширина на прозореца за изглед. Изглежда обаче малко, когато този ефект на модален прозорец може да бъде постигнат с други по-лесни средства. Не знам контекста на проекта, разбира се... - person KVarmark; 02.07.2013

arrow_upward
0
arrow_downward

Можете да добавите клас, който променя позицията на 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;
   }
person Matthew King    schedule 15.06.2016