如何使用 JS 从右到左显示/隐藏带有动画的 div

Question

我正在尝试显示/隐藏一个带有从右到左动画的div。

这是 JScript

$(function() { $('.link').click(function(e) { $('#text').slideToggle(); });});

这是完整的演示： http://jsfiddle.net/q10f3zvL/2/

我的问题是动画是从上到下的。我正在寻找一种方法来让它从右到左，理想情况下，我想要一个 Javascript 的解决方案。

Answer 1

你不想要$('#text').slideToggle(); 这是为了像你发现的那样上下移动。从左到右，你需要$（'#text'）.animate（）;，然后自己设置样式。

jQueryUI已经内置了这个幻灯片效果。

Answer 2

你取两个div，给内部div一个宽度（这是需要的，否则文本将适应宽度并成为一个长1字的行段落），并给外部div一个overflow: hidden;

然后你可以通过jQuery的.animate()选择js动画，但我更喜欢使用css。根据我的经验，这具有更好的性能结果，尤其是在移动设备上。

---

 $('button').on('click', function(e){
     $('#Outer').toggleClass('Closed');
  });    

#Outer{
  max-width: 500px;
  overflow: hidden;
  transition: max-width 1s;
  background: #DDE; /* Just for demo */
}
#Outer.Closed{ max-width: 0px; }
#Inner{ width: 500px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button>Toggle width</button>
<div id="Outer">
  <div id="Inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla mattis quam at ultricies rhoncus. Fusce eget dignissim lacus. Vestibulum venenatis a purus eu sodales. Quisque sodales lectus ut laoreet tempor. Nunc id neque dictum tellus consectetur interdum. Suspendisse eget turpis tincidunt, sollicitudin nisi in, scelerisque metus. Nunc eleifend purus a sapien sodales ullamcorper. Nunc pretium lacus at nibh ornare imperdiet. Phasellus non porttitor est, ut pharetra erat. Aenean rhoncus rutrum eros, eget iaculis ex sodales eget. Nulla id aliquet velit. Duis scelerisque arcu urna. 
    </div>
  </div>