javascript - JQuery:div 滑动以占据整页

Question

我们有一个产品页面，我们将其一分为二。我的目标是让它在您单击其中一个 div 时滑动以填充整个页面并显示产品。

http://jsfiddle.net/Sj575/

HTML

<div>
    <div id="green" class="type1">Exterior products</div>
    <div id="red" class="type2">Interior products</div>    
</div>

CSS

.type1 {
    width:300px;
    background-color:green;
    display:inline-block;
    height:320px;
}
.type2{
    width:300px;
    background-color:red;
    display:inline-block;
    height:320px;   
}

Answer 1

试试这个。 ;)

http://jsfiddle.net/ph31wyy3/1/

HTML

<div>
    <div id="green" class="green block">eezez</div>
    <div id="red" class="red block">eezez</div>    
</div>

CSS

.green {
    width:400px;
    background-color:green;
    display:block;
    height:320px;
  float: left;
}
.red{
    width:200px;
    background-color:red;
    display:block;
    height:320px;   
  float: left;
}

JS

$(function() {
   $('.block').on('click', function(){
      $('.block').not(this).animate({'width' : '0' }, 500, function() { $(this).hide(); });
      $(this).animate({'width' : '100%'}, 500);
   });
});