javascript - simple css fade transition not working through jquery -

when use jquery change opacity 0 , 1, doesn't work. works whens theres no position absolute, need position absolute on 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>

by using position: absolute, you're covering .play , .share anchors. see them because have opacity set 0 on .sharemedia.

to fix it, add 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>