Javascript 向下滑动动画已损坏

我的幻灯片效果有问题，因为当我试图打开菜单时，他的动画完全崩溃了。这是它所提供的动画：正如您所看到的，行显示在左侧，然后快速向右移动，这不是我想要的。我需要它像普通的幻灯片一样正常工作

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

$("#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>

$（“#晶体”）。单击（函数（）{
$（“#晶体1”）。向下滑动（300）；
$（“事件1”）。幻灯片（300）；
$（“#stanze1”）。slideUp（100）；
});
$（“#stanze”）。单击（函数（）{
$（“#晶体1”）.slideUp（100）；
$（“事件1”）。幻灯片（300）；
$（“stanze1”）。向下滑动（300）；
});
$（“#事件”）。单击（函数（）{
$（“#晶体1”）.slideUp（100）；
$（“#stanze1”）。slideUp（100）；
$（“事件1”）。向下滑动（300）；
});
.促销2{
背景：无重复滚动0 0#133c54；
边框：3px实心#095a87；
边界半径：10px；
字体大小：20px；
边缘底部：10px；
最大高度：320px；
最大宽度：520px；
填充：10px；
文本对齐：居中；
宽度：520px；
字体系列：Ubuntu压缩版；
颜色：#FFF；
浮动：左；
}
.水晶{
背景：无重复滚动0 0#133c54；
边框：3px实心#095a87；
边界半径：10px；
字体大小：20px；
高度：20px；
边缘底部：10px；
最大高度：320px；
最大宽度：520px；
填充：10px；
文本对齐：居中；
宽度：520px；
字体系列：Ubuntu压缩版；
颜色：#FFF；
浮动：左；
位置：相对位置；
左：-10px；
顶部：0px；
}
Ricarica Crystal+促销点
50水晶+2促销积分
150水晶+5促销积分
400水晶+10促销积分
850水晶+14提升点
1800水晶+20提升点
4000水晶+30促销积分

经过多次尝试和错误，我通过以下更改成功修复了您的幻灯片向下问题：

将以“Ricarica”开头的div改为一段

将

crystal1

id及其内容更改为使用无序列表而不是div结构

更改了

.crystals

类的边框属性以增强项结构

其他次要编辑

从长远来看，HTML和CSS的某些部分需要重写，以便能够顺利地向下滑动

---

修复代码位于。

经过多次尝试和错误，我通过以下更改成功修复了您的幻灯片向下问题：

将以“Ricarica”开头的div改为一段

将

crystal1

id及其内容更改为使用无序列表而不是div结构

更改了

.crystals

类的边框属性以增强项结构

其他次要编辑

从长远来看，HTML和CSS的某些部分需要重写，以便能够顺利地向下滑动

---

固定代码位于。

您可以共享小提琴吗？必须有比此更多的代码，因为它在此处工作正常：。您可以共享小提琴吗？必须有比此更多的代码，因为它在此处工作正常：。