[英]simple css fade transition not working through jquery
When I use jQuery to change the opacity to 0 and to 1, it doesn't work. 当我使用jQuery将不透明度更改为0和1时,它不起作用。 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>
By using position: absolute
, you're essentially covering up the .play
and .share
anchors. 通过使用
position: absolute
,您实际上是在掩盖.play
和.share
锚点。 You see them only because you have opacity set to 0 on .shareMedia
. 您看到它们的唯一原因是您在
.shareMedia
不透明度设置为0。
To fix it, add this CSS: 要解决此问题,请添加以下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>
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");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.