简单的css淡入淡出过渡不通过jquery

Question

当我使用jQuery将不透明度更改为0和1时，它不起作用。它的工作原理没有绝对的位置，但我需要绝对的位置。谢谢！

＆＃13;

＆＃13;

$('.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);
  }
});

＆＃13;

    .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;
  }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用position: absolute，您实际上掩盖了.play和.share锚点。您只能看到它们，因为.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>

Answer 2

即使有一些奇怪的事情，你的问题的答案的一部分应该是你的不透明度值的引用。

update_mirror = function() {
  var codeMirrorContainer = $sec_tab.find(".CodeMirror")[0];
  if (codeMirrorContainer && codeMirrorContainer.CodeMirror) {
    codeMirrorContainer.CodeMirror.refresh();
  }
}
// Attention! magic!
setTimeout(update_mirror, 100);