I am encountering an issue where the text I am trying to fade just suddenly jumps to its final state without any smooth transition in between, and there is also a delay.
I have been using CSS properties like opacity: 0/1 and transform: opacity for the fading effect. After a thorough debugging process, I realized that this unexpected behavior was caused by an unrelated element with position: absolute underneath. You can view the example in this code snippet below:
var $root = $('.root');
$('#butt_fadetext').click(function(){
$root.toggleClass('dermineyda');
});
$('#butt_hidefancy').click(function(){
$root.toggleClass('nofancy');
});.root {
background-color: #b87988;
}
.container {
transition: opacity 0.5s;
opacity: 1;
height: 100px;
}
.dermineyda .container {
opacity: 0;
}
.inn {
position: absolute;
z-index: 1;
}
.unrelated {
background-color: blanchedalmond;
width: 100px;
height: 30px;
position: absolute;
top: 0;
left: 0;
}
.nofancy .unrelated {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="root">
<div class="container">
<div class="inn">text</div>
</div>
<div class="unrelated">fancy fx</div>
</div>
<input type="button" value="fade text" id="butt_fadetext" />
<input type="button" value="hide fancy fx" id="butt_hidefancy" />