JQuery - 從右側onClick事件中水平滑動div div

Question

我有一個包含產品列表組的網頁。

我想要做的是......當查看器點擊產品V形圖標時，產品列表向左滑動，產品細節從右側滑入。然後當用戶點擊細節V形圖時，細節向右滑動，產品列表從左側滑入。

舉例來說，如果我有這樣的表現的網頁...

Product1 > 
Product2 > 
Product3 > 

當產品2用戶點擊>，細節將在從右側滑動，該列表會滑出左側。網頁看起來像這樣。

< Product2 
    p2 detail1 
    p2 detail2 
    p2 detail3 

當用戶點擊< Product2時，詳細信息將向右滑動，產品列表從左側滑入。

這可能很簡單，使用.animate或類似的東西，肯定是在移動網站上完成的，但我找不到一個好例子。我已經看過水平滑動div的示例，但沒有任何內容在頁面上滑動/滑動。

任何和所有的幫助表示讚賞。謝謝。

Answer 1

下面是一些可以幫助你入門的樣板。基本思路是將left和right設置爲負值以模擬出現/消失屏幕上的元素。

$('.product').click(function() { 
 
    toggleAnimation.call(this, 'right') 
 
}) 
 

 
$('.product-display').click(function() { 
 
    toggleAnimation.call(this, 'left') 
 
}) 
 

 
function toggleAnimation(dir) { 
 
    $('#products').animate({ 
 
    left: dir === 'left' ? '0px' : '-100px' 
 
    }, 1000) 
 

 
    $('#' + this.id + (dir === 'left' ? '' : '-display')).animate({ 
 
    right: dir === 'left' ? '-100px' : '0px' 
 
    }, 1000) 
 
}

.product-display { 
 
    position: absolute; 
 
    right: -100px; 
 
    top: 0; 
 
} 
 

 
#products { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="products"> 
 
    <div id="product-1" class="product">Product 1&gt;</div> 
 
    <div id="product-2" class="product">Product 2&gt;</div> 
 
    <div id="product-3" class="product">Product 3&gt;</div> 
 
</div> 
 

 
<div id="product-1-display" class="product-display">&lt;Product 1</div> 
 
<div id="product-2-display" class="product-display">&lt;Product 2</div> 
 
<div id="product-3-display" class="product-display">&lt;Product 3</div>