簡單的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錨點。 您看到它們的唯一原因是您在.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

即使有一些奇怪的問題，問題的答案之一也應該是不透明度值的引號。

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