如何使用JS从右向左显示/隐藏div？

这里是JScript

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

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

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

来源

2015-01-26 Guillaume

http://stackoverflow.com/questions/14470081/jquery-slidetoggle-horizontal-alternative有类似的问题 – 2015-01-26 20:07:59

你不想$('#text').slideToggle();这对上下移动，你已经发现。从左到右，你会想要$('#text').animate();，只是自己的风格。

jQueryUI已经内置了它的slide effect。

来源

2015-01-26 20:11:51 charles

虽然jQueryUI可能会来得方便，但它只是一个动画的市长矫枉过正。在你使用它之前，看看是否可以找到更多的用途来使它值得加载/解析:)如果不是，只需坚持基本的动画并自己做:) – Martijn 2015-01-26 20:24:57

@Martijn：我得到jQueryUI会为此过度杀伤。我只想指出功能的存在，而不是他正在使用的插件。 '$ .animate（）'是这种事情的典型选择。 – charles 2015-01-27 12:40:13

你把两个div，并给内部的div的宽度（这是必要的，或文本将适应宽度，并成为一个长1个字内衬款），并给予外层div的overflow: hidden;

然后，您可以通过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>

来源

2015-01-26 20:11:49 Martijn

如何使用JS从右向左显示/隐藏div？

回答

相关问题