Jquery FadeIn/FadeOut too abrupt

Question

I have this js code,

EDIT: Forgot to mention, i have this fadeIn when the iframe loads

$('iframe').on('load', function(){
muteVideo();
playVideo();
$(this).fadeIn();
$('.ligarsom').fadeIn();
setTimeout(function() {$('.ligarsom').fadeOut()}, 20000);
});

and this

<script>
$(document).ready(function(){
$('.ligarsom').on('click', function(){
$('.ligarsom').fadeOut(1000);
});
}); 
</script>

and this html

<div class="ligarsom" style="display:none;"></div>

When i use style="visibility:hidden" the div doesn't even appear. And like above fadeOut doesn't work as it should, there is no animation, it just hides abruptaly. Is there anything wrong in my code?

See it in action in: www.finecolor.com.br/novo

Answer 1

Problem: transition: is conflicting with fadOut() Function animation.

Solution: Add this to your css:

.ligarsom, .ligarsom:hover{
    transition: none;
}

Answer 2

This should work in this way

HTML

<div class="ligarsom">click here</div>

jquery

$(document).ready(function() {
$(".ligarsom").click(function() {

    $(this).fadeOut(100);

});

});