我怎么能有一个div从折叠到展开(反之亦然),但这样做从右到左?

我在外面看到的大部分东西都是从左到右的。


当前回答

或者你可以用

$('#myDiv').toggle("slide:right");

其他回答

用这个:

$('#pollSlider-button').animate({"margin-right": '+=200'});

现场演示

改进版本

演示中添加了一些代码,以防止双击时出现双重空白:http://jsfiddle.net/XNnHC/942/

轻松使用它;)

http://jsfiddle.net/XNnHC/1591/

删除了额外的JavaScript代码。 类名和一些CSS代码更改 增加了查找是否展开或折叠的功能 改变了是否使用缓和效果 改变动画速度

http://jsfiddle.net/XNnHC/1808/

我用滚动做的一个例子(只是HTML, CSS和JS,只是用jquery库)。向下滚动时,按钮将向左滑动。

另外,如果你只想要这种效果,我建议你不要使用jQuery UI,因为它太沉重了(如果你只是想使用它)。

$(window).scroll(function(){
  if ($(this).scrollTop() > 100) {
          event.preventDefault();
          $(".scrollToTop").css({'transform': 'translate(0px, 0px)'});
      } else {
          $(".scrollToTop").css({'transform': 'translate(40px, 0px)'});
      }
  });

检查这个例子

一个没有jQuery UI的从右向左动画的例子,只使用jQuery(任何版本,见https://api.jquery.com/animate/)。

$(document).ready(function() { var contentLastMarginLeft = 0; $(".wrap").click(function() { var box = $(".content"); var newValue = contentLastMarginLeft; contentLastMarginLeft = box.css("margin-left"); box.animate({ "margin-left": newValue }, 500); }); }); .wrap { background-color: #999; width: 200px; overflow: hidden; } .content { width: 100%; margin-left: 100%; background-color: #eee; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrap"> click here <div class="content"> I would like to have a div go from collapsed to expanded (and vice versa), but do so from right to left. Most everything I see out there is always left to right. </div> </div>

你可以先定义元素的宽度为0,右浮动,然后在你要显示它的事件上。就像这样

$('#the_element_to_slide_from_right_left').animate({ width:'your desired width' }, 600);

就这么简单。

请看这里的例子。

$("#slider").animate({width:'toggle'});

https://jsfiddle.net/q1pdgn96/2/