带有TweenLite / TweenMax的GreenSock动画平台(GSAP)提供了比jQuery或CSS3过渡更平滑的过渡，定制性更强。为了用TweenLite / TweenMax动画CSS属性，你还需要他们的插件“CSSPlugin”。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文档

根据他们的网站: “TweenLite是一个非常快速、轻量级、灵活的动画工具，是GreenSock动画平台(GSAP)的基础。”

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

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

在尝试为小屏幕尺寸的菜单编写代码时，我遇到了类似的问题。 我的解决方案是把它从视口中赶走。

我使用SASS和JQuery(没有JQuery UI)，但这都可以在原生JS和CSS中实现。

https://codepen.io/maxbethke/pen/oNzMLRa

var menuOpen = false var init = () => { $(".menu__toggle, .menu__blackout").on("click", menuToggle) } var menuToggle = () => { console.log("Menu:Toggle"); $(".menu__blackout").fadeToggle(); if(menuOpen) { // close menu $(".menu__collapse").css({ left: "-80vw", right: "100vw" }); } else { // open menu $(".menu__collapse").css({ left: "0", right: "20vw" }); } menuOpen = !menuOpen; } $(document).ready(init); .menu__toggle { position: absolute; right: 0; z-index: 1; } .menu__blackout { display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10; } .menu__collapse { position: absolute; top: 0; right: 100vw; bottom: 0; left: -80vw; background: white; -webkit-transition: ease-in-out all 1s; transition: ease-in-out all 1s; z-index: 11; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="menu__toggle">Toggle menu</button> <menu class="menu"> <div class="menu__blackout"></div> <div class="menu__collapse"> <ul class="list"> <li class="list__item"> <a class="list__item__link" href="#section1">Menu Item 1</a> </li> <li class="list__item"> <a class="list__item__link" href="#section2">Menu Item 2</a> </li> <li class="list__item"> <a class="list__item__link" href="#section3">Menu Item 3</a> </li> <li class="list__item"> <a class="list__item__link" href="#section4">Menu Item 4</a> </li> <li class="list__item"> <a class="list__item__link" href="#section5">Menu Item 5</a> </li> </ul> </div> </menu>

这可以通过使用jQueryUI隐藏/显示方法来实现。 如。

    // 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

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

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

就这么简单。

我用滚动做的一个例子(只是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)'});
      }
  });

检查这个例子