Question

我正试图横向切换 - 当用户点击它会平滑地向右滑动，当用户想要关闭它时，它会向左滑动

我已经创建了我的JSFiddle，但我不确定如何在用户点击时将幻灯片整合到幻灯片中。这是现场直播：https://jsfiddle.net/gmf1sypw/

HTML：

<div class="wrapper">
    <h3>Happening</h3>
        <div class="content">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p>
        </div>
</div>

CSS：

    *, *:before, *:after {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
    }

    body {
      font-family: 'Open Sans', sans-serif;
      margin-top: 50px;
    }


    .wrapper {
      width: 100%;
      min-height: 250px;
      position: relative;
      border: 2px solid orange;
      border-left: 40px solid orange;
      padding: 15px;
      color: rgba(0, 0, 0, 0.5);
      font-size: small;
      display: inline-block;
    }
    .wrapper h3 {
      font-size: 1rem;
      color: white;
      text-transform: uppercase;
      letter-spacing: 3px;
      position: absolute;
      bottom: 0;
      left: 0;
      margin-left: -30px;
      -webkit-transform: rotate(270deg);
      -moz-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
      -o-transform: rotate(270deg);
      transform: rotate(270deg);
      -webkit-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      transform-origin: 0 0;
    }

Answer 1

您可以尝试jQuery UI slide effect，指明您的方向。或者你可以使用一些jQuery来移动元素：

$('.wrapper').on('click', function() {
  var pntLeft = $('.wrapper').parent().offset().left, 
      chdLeft = $('.wrapper').position().left,
      toggleLeft = (Math.floor(chdLeft - pntLeft)) == -450 ? "0px" : "-450px";
  $('.wrapper').animate({ left: toggleLeft }, 400);
});

body {
  font-family: 'Open Sans', sans-serif;
  margin-top: 50px;
}


.wrapper {
  width: 400px;
  min-height: 150px;
  position: relative;
  border: 2px solid orange;
  border-left: 40px solid orange;
  padding: 15px;
  color: rgba(0, 0, 0, 0.5);
  font-size: small;
  display: inline-block;
  left: 0px;
}
.wrapper h3 {
  font-size: 1rem;
  color: white;
  text-transform: uppercase;
  letter-spacing: 3px;
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: -30px;
  -webkit-transform: rotate(270deg);
  -moz-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  -o-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  transform-origin: 0 0;
}

<div class="wrapper">
  <h3>Happening</h3>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat aliquam deserunt harum rem earum assumenda perspiciatis expedita. Aliquid distinctio tenetur fugiat qui recusandae obcaecati voluptates.</p>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

编辑：此选项可让您将动画仅应用于内容：Fiddle。

侧向切换 - 向右滑动打开，向左滑动关闭

1 个答案: