jQuery幻灯片效果很酷(jQuery Slide Effect is Jerky)

 所以我试图用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>
 
 
 
 
 
 这是我小提琴的链接，因为它更容易看到。 

So I'm trying to do a kind of "click this to get a new thing" with jQuery's slide function.
 
Basically my problem is that the slide animation is jumpy and it's caused by the border that I set in the .toggleO class. The obvious solution is to get rid of the border, but I would like to keep it, so I was wondering if there was some way to do that while having a smooth transition?
 
Here's the snippet:
 
 
 
 
 
  
$(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>
 
 
 
 
 
Here's the link to my fiddle since it's easier to see there.

原文：https://stackoverflow.com/questions/36742579