Fuiba Fuiba - 5 months ago 10
Javascript Question

Why jQuery.animate position doesn't work?

I want to .animate css position property from

position : relative
to
position : absolute
with jQuery.

I have a small div inside the div container and i want to expand this div when clicking on a button to fit to the window.

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>


I treid with
jQuery().animate
but doesn't work and i treid with
jQuery().css
and works, but not as I want.

This what i did:

$(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

Thank you very much for any help!

Best Regards.

Answer

You want something like that? DEMO 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);
    });
});
Comments