Redimensionnement d'un div parent avec jQuery

Question

J'essaie de configurer une page où, lorsque l'utilisateur clique sur l'une des lettres dans les 3 divs, ce div redimensionne et «couvre» les deux autres divs sur l'écran - mais J'ai frappé un mur de briques avec la déclaration jquery - Je sais que cela implique la fonction de redimensionnement (et probablement la fonction css), mais je ne peux pas comprendre pour la vie de moi comment exactement le faire.

HTML/CSS

<div class="container"> 
    <div id="home" class="group"> <span class="lettering" id="A"> 
      A 
      </span> 

    </div> 
    <div id="portfolio" class="group" style="margin-left: -4px;"> <span class="lettering" id="P"> 
      P 
      </span> 

    </div> 
    <div id="contact" class="group" style="margin-left: -4px;"> <span class="lettering" id="C"> 
      C 
      </span> 

    </div> 
</div> 

html, body { 
    font-size: 1em; 
    background: #fff; 
    height: 100%; 
} 
.container { 
    width: 100%; 
    height: 100%; 
} 
#home { 
    background-color: #4D90FE; 
} 
.group { 
    height: 100%; 
    text-align: center; 
    position: relative; 
    display: inline-block; 
} 
#portfolio { 
    background-color: #DD4B39; 
} 
#contact { 
    background-color: #777777; 
} 
.lettering { 
    color: #fff; 
    font: bolder 7em'Bitter Bold'; 
    vertical-align: middle; 
    position: relative; 
} 

jQuery

jQuery(document).ready(function() { 
    /*------------------------ 
    Set Divs to 1/3 Width of Screen 
    ------------------------*/ 
    $(".group").css("width", ($(window).width() * 1/3)); 
    $(window).resize(function() { 
     $(".group").css('height', $(window).height()); 
     $(".group").css("width", ($(window).width() * 1/3)); 
    }); 
    /*------------------------ 
    Vertically Center Div 
    ------------------------*/ 
    $('.lettering').css("top", ($('.group').height() - $('.lettering').height())/2); 
    /*----------------------- 
    Expand Div on Element Click 
    -----------------------*/ 
    $('.lettering').click(function() { 
     $(this).parent().resize(function() { 
      /* ??? */ 
     }); 
    }); 
}); 

http://jsfiddle.net/qg8Zd/

Answer 1

Position tous divs absolue, et changer la div de ce qui a été cliqué:

jQuery(document).ready(function() { 
    $(".group").each(function(index, element) 
    { 
     var len = $(".group").length; 
     //console.log((100/len * index) + "%"); 
     $(element).css("left", (100/len * index) + "%"); 
    }); 

    $('.lettering').click(function() 
    { 
     $(this).parent().animate({ width: "100%", left: 0 }, 500).css("z-index", 1); 
    }); 
}); 

Fiddle

Resize n'est pas ce que vous pensez, c'est un événement déclenché lorsque la taille de l'élément de fenêtre change par l'utilisateur.

/modifié pour tenir compte des changements /édités à nouveau pour l'animation