Question

我正试图从右到左显示/隐藏带动画的div。

这是JScript

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

以下是完整演示：http://jsfiddle.net/q10f3zvL/2/

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

Answer 1

您不希望$('#text').slideToggle();在您发现的情况下上下移动。{P}从左到右，您需要$('#text').animate();，并自行设置样式。

jQueryUI已经内置了slide effect。

Answer 2

你取两个div，并给内部div一个宽度（这是必需的，或者文本将适应宽度，并成为一个长1个字的段落），并给外部div overflow: hidden; < / p>

然后你可以通过jQuery的.animate()选择js动画，但我更喜欢using 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>

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

2 个答案: