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);
   });
});

Answer 2

使用以下jQuery（以及一些html / css更改），您将获得以下信息： http : //jsfiddle.net/Sj575/274/

$(function() {
 $(".green").click(function() {

    $(".red").toggleClass("hidden");
    $(".green").toggleClass("full")

});

$(".red").click(function() {

    $(".green").toggleClass("hidden");
    $(".red").toggleClass("full")

 });
});

编辑：这是另一张幻灯片， http：//jsfiddle.net/Sj575/277/