Question

所以我试图用jQuery的滑动功能做一种“点击这个来获得新东西”。

基本上我的问题是幻灯片动画是跳跃的，它是由我在.toggleO类中设置的边框引起的。明显的解决方案是摆脱边界，但我想保留它，所以我想知道在平稳过渡时是否有某种方法可以做到这一点？

以下是片段：

$(document).ready(function() {

  $(".toggleO").click(function() {
    $(".toggleO").slideUp(500);
    $(".toggledInfo").slideDown(500);
  });

  $(".toggleC").click(function() {
    $(".toggledInfo").slideUp(500);
    $(".toggleO").slideDown(500);
  });

});

#container {
  width: 500px;
  height: 350px;
  margin: 0px auto;
  font-family: arial;
  font-size: 11px;
  line-height: 13px;
}

#container .toggleO {
  width: 490px;
  height: 340px;
  background-image: url("http://ultraimg.com/images/8de3786443f8af4db9e4a29b8b658c00.jpg");
  cursor: crosshair;
  border: 5px solid black;
}

#container .toggleC {
  width: 500px;
  margin-top: 25px;
  font-family: georgia, times new roman, serif;
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: crosshair;
}

#container .toggledInfo {
  display: none;
}

#container .inside {
  padding: 50px;
  width: 400px;
  height: 260px;
  background-color: #000;
  color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<div id='container'>
  <div class='toggleO'></div>

  <div class='toggledInfo'>
    <div class='inside'>
      here are links about my thing yep

      <div class='toggleC'>
        close
      </div>
    </div>
  </div>
</div>

以下是我fiddle的链接，因为它更容易在那里看到。

Answer 1

所需的更改：

我在＃container.inside css中更改了你的css中的几行，因为它应该是250px而不是260px。
我改变的另一件事是我在＆＃39; toggleO＆＃39;中包含了一个包装div。 div以防止边框对动画的影响。从现在开始，动画将应用于包装器，而不是包含边框的toggleO。
第三个也是最重要的变化包括＆＃34;溢出：隐藏;＆＃34;在#container css中。这将删除应用上述步骤后剩余的小混蛋。

这是一个经过修改的jsfiddle：https://jsfiddle.net/o0LcoLg1/8/

代码段：

<html>
<head>
  <script src="https://code.jquery.com/jquery-2.2.3.js" integrity="sha256-laXWtGydpwqJ8JA+X9x2miwmaiKhn8tVmOVEigRNtP4=" crossorigin="anonymous"></script>
  <style>
    #container {
      width: 500px;
      height: 350px;
      margin: 0px auto;
      font-family: arial;
      font-size: 11px;
      line-height: 13px;
      overflow: hidden; // for the little jerk
    }
    #container .toggleO {
      width: 490px;
      height: 340px;
      background-image: url("http://ultraimg.com/images/8de3786443f8af4db9e4a29b8b658c00.jpg");
      cursor: crosshair;
      border: 5px solid black;
    }
    #container .toggleC {
      width: 500px;
      margin-top: 25px;
      font-family: georgia, times new roman, serif;
      font-size: 8px;
      text-transform: uppercase;
      letter-spacing: 1px;
      cursor: crosshair;
    }
    #container .toggledInfo {
      display: none;
    }
    #container .inside {
      padding: 50px;
      width: 400px;
      height: 250px;
      background-color: #000;
      color: #fff;
    }
  </style>
  <script>
    $(document).ready(function() {

      $(".wrapper").click(function() {
        $(".wrapper").slideUp(500);
        $(".toggledInfo").slideDown(500);
      });

      $(".toggleC").click(function() {
        $(".toggledInfo").slideUp(500);
        $(".wrapper").slideDown(500);
      });

    });
  </script>
</head>
<body>
  <div id='container'>
    <div class="wrapper">
      <div class='toggleO'></div>
    </div>
    <div class='toggledInfo'>
      <div class='inside'>
        here are links about my thing yep

        <div class='toggleC'>
          close
        </div>
      </div>
    </div>
  </div>
</body>
</html>

jQuery幻灯片效果不稳定

1 个答案: