从右向左滑动？

jquery CSS

猴子前端

2020-03-19

我怎样才能使div从折叠状态变为展开状态（反之亦然），却又从右向左移动呢？

我在那里看到的大多数东西总是从左到右。

第2421篇《从右向左滑动？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共4个回答
小小Itachi 2020.03.19

An example of right to left animation without jQuery UI, just with jQuery (any version, see 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>

卡卡西Sam 2020.03.19

我这样做是这样的：

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

请注意，节点“ btn”应在动画之前隐藏，并且您可能还需要为其设置“ position：absolute”。

GilTom神乐 2020.03.19

用这个

<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>
伽罗蛋蛋 2020.03.19

这可以使用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 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android