如何做出菜單從右側出現,滑動感的菜單?

发布于 2022-09-06 23:27:27 字数 676 浏览 12 评论 0

想問有沒有簡單的範例
點擊某按鈕後能觸動右側的隱藏菜單往左出現
收回時再往右回去
不知道要用什麼keywords去查
請問這種技術是什麼名字?

$(".closeRightLayout,.add_layout_after").click(function(e) {

  $( ".rightLayout" ).animate({
    opacity: 0.5,
    right: "-300px",
    height: "toggle"
  }, 300, function() {
    // Animation complete.
  });

  $(".rightLayout,.add_layout_after").fadeOut();
});
$("#add_tab").click(function(e) {

  $( ".rightLayout" ).animate({
    opacity: 1,
    right: "0",
    height: "toggle"
  }, 300, function() {
    // Animation complete.
  });

  $(".rightLayout,.add_layout_after").fadeIn();
});

我寫了一個這樣的代碼
我發現案他出來的時候很順
但當他回去的時候會很快
明明一樣都是300ms...

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

面犯桃花 2022-09-13 23:27:27

使用animate.css里面的一些动画就可以做到(https://daneden.github.io/ani...),或者自行百度css3滑动特效,就是在点击按钮的时候添加相应的class即可


应该是你一开始没有给right一个初始值的原因,而你让其滑出的时候给了right一个-300px;这会导致滑入和滑出的速度是不一样的,虽然时间一样,但是固定时间内运行的距离是不一样的,你确保right的初始值跟滑出的值是一样的,这样滑入滑出的速度就是一样的

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文