Question

我的Slidingown效果有问题，因为当我尝试打开菜单时，他的动画很破碎。这是它给出的动画：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

经过多次反复试验，我设法通过以下更改修复了您的滑动问题：

将以“Ricarica”开头的div改为段落
更改crystal1 id及其内容以使用无序列表而不是div结构
更改了.crystals类的边框属性以增强项目结构
其他小编辑

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

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

Slidedown动画坏了

1 个答案: