Pourquoi la position jQuery.animate ne fonctionne pas?

Question

Je veux .animate css positionnez la propriété de position : relative à position : absolute avec jQuery. J'ai un petit div à l'intérieur du conteneur div et je veux développer ce div en cliquant sur un bouton pour s'adapter à la fenêtre.

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> 

Je treid avec jQuery().animate mais ne fonctionne pas et je treid avec jQuery().css et travaille, mais pas comme je veux.

Ce que j'ai fait:

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

Merci beaucoup pour toute aide!
Cordialement.

Answer 1

Vous voulez quelque chose comme ça? 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); 
    }); 
}); 

Answer 2

Position les propriétés elles-mêmes ne sont pas animables. Vous pouvez modifier les valeurs left, top et bottom pour obtenir un effet de mouvement.

Answer 3

Ceci est une solution simple au problème que vous mentionnez, une ré-écriture:

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

Vous pouvez ajouter une classe qui change la position de la div et utiliser la méthode .addClass et .removeClass pour activer cette classe lorsque l'élément est cliqué.

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