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

有以下的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/

Answer 2

试试这个。 ）

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