Question

我昨天发布了关于骑自行车穿过一些盒子的信息，每个人都非常乐于助人！

基本上，我有四个＆＃34;盒子＆＃34; （COR＆＃39; S）。位置0（cor-last），1（cor-active），2（cor-next），3（cor-third）。

当cor-next点击时，cor-active淡出并成为具有css的cor-last

 .cor-last {
top: 800px;
left: 480px;
width: 315px;
opacity: 0;
z-index: 30;
}

然后，经过x个时间（setTimeout尚未到位），它会改变回位置3，其css为：

.cor-third {
top: 430px;
left: 850px;
width: 168px;
z-index: 10;
opacity: 1;
}

但就目前而言，图像开始改变不透明度，以便您可以看到它在屏幕上滑动。虽然我希望它能够逐渐淡化为cor-last（就像它一样），并且在它已经在-in- .cor-third的位置之后逐渐消失。

$('.cor-link').click(function(event){
if ($(this).hasClass('cor-active')){
} else {
  $('.cor-link').each(function(index, element){
    ($(element).find('button').removeAttr("data-toggle", "modal"));      
    if ($(element).hasClass('cor-next')){
      $(element).addClass('cor-active').removeClass('cor-next');
      $(element).trigger('click');
    } else if ($(element).hasClass('cor-third')){
      $(element).addClass('cor-next').removeClass('cor-third');
    } else if ($(element).hasClass('cor-active')){
      $(element).addClass('cor-last').removeClass('cor-active');
    } else if ($(element).hasClass('cor-last')){
      $(element).addClass('cor-third').removeClass('cor-last');
    }

  })
    }

}）请记住这些是我在这里的前几个帖子，每个人都非常有帮助！

编辑：CSS

.cor-active {
  top: 600px;
    left: 500px;
    width: 315px;
    z-index: 30;
 opacity:1;
}

.cor-next {
  top: 500px;
    left: 700px;
    width: 229px;
    z-index: 20;
}

.cor-last {
  top: 800px;
    left: 480px;
    width: 315px;
  opacity: 0;
  z-index: 30;
}

.cor-back {
  top: 400px;
  left: 800px;
  width: 90px;
  opacity: 0px;
  }
.cor-third {
    top: 430px;
    left: 850px;
    width: 168px;
    z-index: 10;
  opacity: 1;
  }

HTML：

<div class="everything">
<button type="button" class="btn btn-info btn-lg" data-target="#corbronze">
    <img src="" />
  </button>
</a>

<a  href="#" onclick="return false;" class="cor-link silver cor-next">
  <button type="button" class="btn btn-info btn-lg" data-target="#corsilver">
    <img src="" />
  </button>
</a>
<a  href="#" onclick="return false;"  class="cor-link gold cor-third">
  <button type="button" class="btn btn-info btn-lg" data-target="#corgold">

    <img src="" />

  </button>
</a>
</div>

淡出一个类，淡入另一个类（jQuery）

0 个答案: