Question

我真的很接近这个工作，但我有点卡住了。

我需要第二个文本保持放，而包含它的股利扩大宽度。所以这两段文字在任何时候都是相互重叠的。

http://jsfiddle.net/29W6R/

HTML：

<div class='wrapper'> 
    <div class="page content1"> 
     <div class='skewfix'> 
      <div class='skew'> 
       something else in here 
      </div> 
     </div> 
    </div> 
    <div class="page content2"> 
     <div class='skewfix'> 
      <div class='skew'> 
       something else in here 
      </div> 
     </div> 
    </div> 
</div> 

CSS：

div.page{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    margin: 0 0 0 -25%; 
    width: 125%; 
    transition: width 2s; 
    overflow: hidden; 
    height: 100%; 
    -webkit-transform: skew(45deg,0); 
    -webkit-transform-origin: 0% 0%; 
} 

.skewfix{ 
    -webkit-transform: skew(-45deg,0); 
    -webkit-transform-origin:0% 0%; 
} 

div.content1{ 
    background:tomato; 
} 
div.content2{ 
    background: blue; 
    width:0px; 
} 

.skew{ 
    margin:0 0 0 25%; 
} 

div.wrapper{ 
    width: 100%; 
    overflow: hidden; 
    position: relative; 
    height: 200px; 
} 

JS：

$('.content1').click(function(){ 
    $('.content2').width("125%"); 
}); 

$('.content2').click(function(){ 
    $('.content2').width("0%"); 
}); 

Answer 1

改变你的CSS

.skew {margin: 0 0 0 220px;width:140px;} 

你的文字将保持在当你的DIV展开折叠