JQuery - Horizontal div in div von rechts onClick Event

Question

Ich habe eine Webseite, die eine Liste-Gruppe von Produkten hat.

Was ich versuche zu tun ist ... wenn ein Betrachter auf einen Produkt-Chevron klickt, wird die Produktliste nach links verschoben und die Details der Produkte werden von rechts eingeblendet. Wenn der Benutzer dann auf den Detail-Chevron klickt, werden die Details nach rechts verschoben und die Produktliste wird von links eingeblendet.

Zum Beispiel, wenn ich mit dieser Darstellung eine Webseite habe ...

Product1 > 
Product2 > 
Product3 > 

Wenn Benutzer klickt auf Product2> werden die Details gleiten in von rechts und die Liste wird nach links herausziehen. Und die Webseite sieht so aus.

< Product2 
    p2 detail1 
    p2 detail2 
    p2 detail3 

Wenn der Benutzer auf < Product2 klickt, werden die Details nach rechts und Produktliste Folie in von links abrutschen.

Dies ist wahrscheinlich so einfach, mit .animate oder dergleichen, und wird sicherlich auf mobilen Websites durchgeführt, aber ich kann einfach kein gutes Beispiel finden. Ich habe Beispiele gesehen, die gleitende divs horizontal zeigen, aber nichts, das von/auf die Seite gleitet.

Alle und alle Hilfe wird geschätzt. Vielen Dank.

Answer 1

Hier sind einige Beispiele für den Einstieg. Die Grundidee besteht darin, left und right auf negative Werte zu setzen, um das Element zu simulieren, das vom Bildschirm erscheint/verschwindet.

$('.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>