JQuery - 从右侧onClick事件中水平滑动div div

-2

我有一个包含产品列表组的网页。JQuery - 从右侧onClick事件中水平滑动div div

我想要做的是......当查看器点击产品V形图标时，产品列表向左滑动，产品细节从右侧滑入。然后当用户点击细节V形图时，细节向右滑动，产品列表从左侧滑入。

举例来说，如果我有这样的表现的网页...

Product1 > 
Product2 > 
Product3 >

当产品2用户点击>，细节将在从右侧滑动，该列表会滑出左侧。网页看起来像这样。

< Product2 
    p2 detail1 
    p2 detail2 
    p2 detail3

当用户点击< Product2时，详细信息将向右滑动，产品列表从左侧滑入。

这可能很简单，使用.animate或类似的东西，肯定是在移动网站上完成的，但我找不到一个好例子。我已经看过水平滑动div的示例，但没有任何内容在页面上滑动/滑动。

任何和所有的帮助表示赞赏。谢谢。

来源

2016-07-28 MaxAx

发挥你的想象力。将元素左移。比在一个按钮上单击动画到'left：0'。如何动画？ Goog，创造一些东西，比如果你坚持回来一些代码！请阅读[问]，发布示例时，请确保创建[mcve]。 –

下面是一些可以帮助你入门的样板。基本思路是将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>

来源

2016-07-28 20:26:50 Damon

谢谢Damon。正是我需要的。 – MaxAx

JQuery - 从右侧onClick事件中水平滑动div div

回答

相关问题