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