simple css fade transition not working through jquery

Question

When I use jQuery to change the opacity to 0 and to 1, it doesn't work. It works whens theres no position absolute, but I need position absolute on my elements. Thanks!

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

By using position: absolute , you're essentially covering up the .play and .share anchors. You see them only because you have opacity set to 0 on .shareMedia .

To fix it, add this CSS:

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

Snippet:

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

Even if there is a few weird things, one part of the answer to your question should be the quotes for your opacity value.

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