从右向左滑动?

$("#slide").animate({width:'toggle'},350);

参考文献: https://api.jquery.com/animate/

这可以使用jqueryui hide/show方法实现。 如。

    // To slide something leftwards into view,
    // with a delay of 1000 msec
    $("div").click(function () {
          $(this).show("slide", { direction: "left" }, 1000);
    });

参考文献: http://docs.jquery.com/UI/Effects/Slide

使用此:

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

Live demo

改进版

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

轻松使用;)

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

• 删除了额外的javascript代码。

• 类名和一些css代码已更改

• 添加了查找是否展开或折叠的功能

• 是否使用缓解效果改变

• 更改动画速度

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

看一看 this working example 在小提琴上,它使用 jQuery UI . 这是我最初从左到右使用的解决方案,但我已将其更改为从右到左工作。

它允许用户快速点击链接,而不破坏可用面板之间的动画。

javascript代码很简单:

$(document).ready(function(){
    // Mostra e nascondi view-news
    var active = "europa-view";
    $('a.view-list-item').click(function () {
        var divname= this.name;
        $("#"+active ).hide("slide", { direction: "right" }, 1200);
        $("#"+divname).delay(400).show("slide", { direction: "right" }, 1200);
        active = divname;
    });
});

在fiddle链接上获取html和css。

增加了白色背景和左填充只是为了更好的效果演示。

用这个

<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        $("#flip").click(function () {
            $("#left_panel").toggle("slide", { direction: "left" }, 1000);
        });
    });
</script>

$(function() {
  $('.button').click(function() {
    $(this).toggleClass('active');
    $('.yourclass').toggle("slide", {direction: "right"}, 1000);
  });
});

我是这样做的:

var btn_width = btn.width();
btn.width(0);
btn.show().animate({width: btn_width}, {duration: 500});

注意,该节点“btn”应该在动画之前隐藏,您可能还需要将其设置为“position:absolute”。

另一个值得一提的图书馆是 animate.css . 它在jquery中工作得很好,您只需切换css类就可以完成许多有趣的动画。

像…

$(“35;幻灯片”).toggle().toggleClass('animated bounceinleft');

您可以首先将元素的宽度定义为0(向右浮动),然后在您将要显示它的事件中定义。就好像

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

就这么简单。

GreenSock Animation Platform (GSAP) 具有 TweenLite / TweenMax 与jquery或css3转换相比,它提供了更平滑的转换和更大的定制。为了使用tweenlite/tweenmax设置css属性的动画,您还需要一个名为“css plugin”的插件。Tweenmax自动包含此项。

首先,加载Tweenmax库:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

或者轻量级的Tweenlite:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>

然后,调用动画:

 var myObj= document.getElementById("myDiv");

// Syntax: (target, speed, {distance, ease})
 TweenLite.to(myObj, .7, { x: 500, ease: Power3.easeOut});

您还可以使用id选择器调用它:

 TweenLite.to("#myID", .7, { x: 500, ease: Power3.easeOut});

如果加载了jquery,则可以使用更高级的宽选择器,如包含特定类的所有元素:

 // This will parse the selectors using jQuery's engine.
TweenLite.to(".myClass", .7, { x: 500, ease: Power3.easeOut});

有关详细信息,请参见: TweenLite Documentation

根据他们的网站: TWENLITE是一种极其快速、轻量级、灵活的动画工具,它是GrimSokes动画平台(GSAP)的基础。

从右向左动画示例 不带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>

看看这里的例子。

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

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

我用scroll完成的一个例子(只有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)'});
      }
  });

检查 this example

如果你 div 是绝对的位置,你知道宽度,你可以使用:

#myDiv{
position:absolute;
left: 0;
width: 200px;
}

$('#myDiv').animate({left:'-200'},1000);

它会滑出屏幕。

或者,你可以用容器包装它 div

#myContainer{
position:relative;
width: 200px;
overflow: hidden;
}

#myDiv{
position:absolute;
top: 0;
left: 0;
width: 200px;
}

<div id="myContainer">

<div id="myDiv">Wheee!</div>

</div>

$('#myDiv').animate({left:'-200'},1000);