Answers for "javascript fadein fadeout"

fade in javascript

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").fadeIn();
    $("#div2").fadeIn("slow");
    $("#div3").fadeIn(3000);
  });
});
</script>
</head>
<body>

<p>Demonstrate fadeIn() with different parameters.</p>

<button>Click to fade in boxes</button><br><br>

<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

</body>
</html>

Posted by: Guest on May-27-2021

fadein fadeout jquery

$('.btn-cart').click(function(e) {
		e.preventDefault();
		$('.cartlist').fadeIn().addClass('active');
	});

	$('.btn-cartlist-close').click(function() {
		$('.cartlist').removeClass('active').fadeOut();
	});

Posted by: Guest on December-15-2020

vanilla javascript fade out

<div id="target">Click to fade</div>
<script>
  function fadeOutEffect() {
    var fadeTarget = document.getElementById("target");
    var fadeEffect = setInterval(function () {
        if (!fadeTarget.style.opacity) {
            fadeTarget.style.opacity = 1;
        }
        if (fadeTarget.style.opacity > 0) {
            fadeTarget.style.opacity -= 0.1;
        } else {
            clearInterval(fadeEffect);
        }
    }, 200);
}

document.getElementById("target").addEventListener('click', fadeOutEffect)
</script>
<style>
  #target {
    height: 100px;
    background-color: red;
}
</style>

Posted by: Guest on August-18-2021

Source