javascript - 简单的 css 淡入淡出过渡不能通过 jquery 工作

Question

当我使用 jQuery 将不透明度更改为 0 和 1 时，它不起作用。它在没有绝对位置的情况下起作用，但我需要在我的元素上有绝对位置。谢谢!

$('.share').on("click",function(e){
  if($('.shareMedia').css("bottom")=="54px"){
    $('.shareMedia').css("bottom","0px");
    $('.shareMedia').css("opacity",0);
  }
  else{
     $('.shareMedia').css("bottom","54px");
     $('.shareMedia').css("opacity",1);
  }
});

    .shareMedia{
      position: absolute;
      bottom:0;
      background-color: rgba(0,0,0,.40);
      padding: 10px 12px;
      transition:.6s;
      opacity:0;
}

.controls{
    position: absolute;
    bottom:0;
    width: 100%;
    background-color: rgba(0,0,0,.40);
    padding: 10px 0;
    transition:.6s;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="controls">
        <a href="#" class="play">play</a>
        <a href="#" class="share">share</a>
          <div class="shareMedia">
          <a href="#"><img src="../images/facebook_icon.png"></a>
          <a href="#"><img src="../images/twitter_icon.png"></a>
          <a href="#"><img src="../images/twitter_icon.png"></a>
        </div>
      </div>

Answer 1

通过使用 position: absolute，您基本上覆盖了 .play 和 .share anchor 。您看到它们只是因为您在 .shareMedia 上将不透明度设置为 0。

要修复它，请添加此 CSS:

.play, .share {
  position: relative;
  z-index: 1;
}

片段:

$('.share').on("click", function(e) {
  if ($('.shareMedia').css("bottom") == "54px") {
    $('.shareMedia').css("bottom", "0px");
    $('.shareMedia').css("opacity", 0);
  } else {
    $('.shareMedia').css("bottom", "54px");
    $('.shareMedia').css("opacity", 1);
  }
});

.shareMedia {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, .40);
  padding: 10px 12px;
  transition: .6s;
  opacity: 0;
}
.controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, .40);
  padding: 10px 0;
  transition: .6s;
}
.play, .share {
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="controls">
  <a href="#" class="play">play</a>
  <a href="#" class="share">share</a>
  <div class="shareMedia">
    <a href="#">
      <img src="../images/facebook_icon.png">
    </a>
    <a href="#">
      <img src="../images/twitter_icon.png">
    </a>
    <a href="#">
      <img src="../images/twitter_icon.png">
    </a>
  </div>
</div>