javascript - 滑动动画损坏

Question

我的幻灯片效果有问题，因为当我尝试打开菜单时，他的动画非常糟糕。这是它给出的动画损坏:https://gyazo.com/450138f37f6b8e99c1e9fc452a3108e4正如您所看到的，行出现在左侧，然后它们快速移动到右侧，这不是我想要的。我需要它像普通幻灯片一样正常工作

这是我的代码，希望有人能够帮助我!

$("#crystal").click(function(){
  $("#crystal1").slideDown(300);
  $("#eventi1").slideUp(300);
  $("#stanze1").slideUp(100);
});

$("#stanze").click(function(){
  $("#crystal1").slideUp(100);
  $("#eventi1").slideUp(300);
  $("#stanze1").slideDown(300);
});

$("#eventi").click(function(){
  $("#crystal1").slideUp(100);
  $("#stanze1").slideUp(100);
  $("#eventi1").slideDown(300);
});

.promo2{
  background: none repeat scroll 0 0 #133c54;
  border: 3px solid #095a87;
  border-radius: 10px;
  font-size: 20px;
  margin-bottom: 10px;
  max-height: 320px;
  max-width: 520px;
  padding: 10px;
  text-align: center;
  width: 520px;
  font-family: Ubuntu Condensed;
  color: #FFF;
  float: left;
}

.crystals{
  background: none repeat scroll 0 0 #133c54;
  border: 3px solid #095a87;
  border-radius: 10px;
  font-size: 20px;
  height: 20px;
  margin-bottom: 10px;
  max-height: 320px;
  max-width: 520px;
  padding: 10px;
  text-align: center;
  width: 520px;
  font-family: Ubuntu Condensed;
  color: #FFF;
  float: left;
  position: relative;
  left: -10px;
  top: 0px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="promo2" id="crystal">
  <div style="height:auto; width:96px; height:96px; background-image:url(image/crystal2.png); float:left;"></div>
  <div style="font-size: 41px;">
    Ricarica Crystal + <span style="color:#f7cc02;">Promotion Point</span>
    <img style="position: relative;left: 55px;top: -28px;" src="image/frecciadown.png">
  </div>

  <div style="display:none" id="crystal1">
    <div class="crystals" id="first" style="z-index:12; top:14px;">
      <span style="color:#47c5ff;"> 50 Crystal</span> + <span  style="color:#f7cc02;">2 Promotion Points</span>
      <img src="image/frecciaright.png" style="left: 140px; position: relative;">
    </div>
    <div class="crystals" style="z-index:11; top:-7px;">
      <span style="color:#47c5ff;"> 150 Crystal</span> + <span  style="color:#f7cc02;">5 Promotion Points</span>
      <img src="image/frecciaright.png" style="left: 136px;position: relative;">
    </div>
    <div class="crystals" style="z-index:10; top:-27px;">
      <span style="color:#47c5ff;"> 400 Crystal</span> + <span  style="color:#f7cc02;">10 Promotion Points</span>
      <img src="image/frecciaright.png" style="left: 132px;position: relative;">
    </div>
    <div class="crystals" style="z-index:9; top:-47px;">
      <span style="color:#47c5ff;"> 850 Crystal</span> + <span  style="color:#f7cc02;">14 Promotion Points</span>
      <img src="image/frecciaright.png" style="left: 132px;position: relative;">
    </div>
    <div class="crystals" style="z-index:8; top:-67px">
      <span style="color:#47c5ff;"> 1800 Crystal</span> + <span  style="color:#f7cc02;">20 Promotion Points</span>
      <img src="image/frecciaright.png" style="left: 128px;position: relative;">
    </div>
    <div class="crystals" style="z-index:7; top:-90px">
      <span style="color:#47c5ff;"> 4000 Crystal</span> + <span  style="color:#f7cc02;">30 Promotion Points</span>
      <img src="image/frecciaright.png" style="left: 128px;position: relative;">
    </div>
  </div>
</div>

Answer 1

经过多次尝试和错误，我设法通过以下更改解决了您的幻灯片问题:

1. 将以“Ricarica”开头的 div 变成段落
2. 更改了 crystal1 id 及其内容，以使用无序列表而不是 div 结构
3. 更改了 .crystals 类的边框属性以增强元素结构
4. 其他细微修改

从长远来看，您的 HTML 和 CSS 的部分内容需要重写才能实现流畅的滑动。

固定代码位于 http://jsfiddle.net/jkantner/grkmwyav/ .