从左右或左右滑动div,保留div大小

时间:2017-03-26 09:51:06

标签: javascript jquery css

我希望从左到右或从右到左对div进行幻灯片效果,如

$('#div').show('slide', {direction:'left'}, 1000);

成为我的HTML是

<div id="div-pre">
</div>
<div id="div">
</div>
<div id="div-nex">
</div

但这种方法的问题在于我们最初通过设置

来隐藏#div
#div{
display:none;
}

这样我们就无法保留#div

的宽度

我通过隐藏可见性来看到另一种方法:隐藏在

$("div").css("visibility", "hidden");

保留div的宽度 但是这种方法不会从左到右或从右到左给出滑动效果

  

所以我想同时实现两种效果,如.show(&#39; slide&#39;,[option],[speed])   保留div宽度&#34;

2 个答案:

答案 0 :(得分:1)

没有示例代码,我决定写一个如何处理这个问题的基本示例。基本上,您在保留宽度的同时将$(document).ready(function(){ $('.slideLeft').click(function(){ $('.slider').animate( {'left':'-600px'}, 1000, function(){ $('.slider').hide(); } ); }); });容器放在要向左滑动的东西周围,然后使用.slider{ height: 300px; width: 600px; font-size: 20px; background-color: yellow; position: relative; } .container{ border: 1px solid red; height: 300px; width: 600px; background-color: silver; overflow: hidden; } .slideLeft{ margin-top: 10px; }向左移动动画。你的div必须相对定位才能工作。见下面的例子。

&#13;
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="slider">
    Hi, I have some content!
  </div>
</div>
<button class="slideLeft">Slide me left!</button>
&#13;
mergeMap
&#13;
concurrent
&#13;
&#13;
&#13;

祝你好运!

答案 1 :(得分:-1)

你可以将你的div包装在另一个div中,使用溢出:隐藏,然后移动到右边或左边的div。