JAVASCRIPT

jquery fadein

$(".example").fadeIn(500);

fadein fadeout jquery

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

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

jquery fadeout and remove

<a onclick='$("#notification").fadeOut(300, function() { $(this).remove(); });' class="notificationClose "><img src="close.png"/></a>

jquery fade out

$(selector).fadeOut(duration)
$(selector).fadeIn(duration)

javascript fadein fadeout

#slideSource {
  opacity: 1;
  transition: opacity 1s; 
}

#slideSource.fade {
  opacity: 0;
}

jquery fadeout to fadein

$('#ToHide').fadeOut(function () { $('#ToShow').fadeIn(); });

fade in and fadeout animation

.elementToFadeInAndOut {
    width:200px;
    height: 200px;
    background: red;
    -webkit-animation: fadeinout 4s linear forwards;
    animation: fadeinout 4s linear forwards;
}

@-webkit-keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

@keyframes fadeinout {
  0%,100% { opacity: 0; }
  50% { opacity: 1; }
}

javascript fadeout without jquery

if (!Element.prototype.fadeIn) {
    Element.prototype.fadeIn = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        this.style.opacity = 0;
        this.style.filter = "alpha(opacity=0)";
        this.style.display = "inline-block";
        this.style.visibility = "visible";

        let $this = this,
            opacity = 0,
            timer = setInterval(function() {
            opacity += 50 / ms;
            if( opacity >= 1 ) {
                clearInterval(timer);
                opacity = 1;

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}

if (!Element.prototype.fadeOut) {
    Element.prototype.fadeOut = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        let $this = this,
            opacity = 1,
            timer = setInterval( function() {
            opacity -= 50 / ms;
            if( opacity <= 0 ) {
                clearInterval(timer);
                opacity = 0;
                $this.style.display = "none";
                $this.style.visibility = "hidden";

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}

// fadeIn with default: 400ms
document.getElementById(evt.target.id).fadeIn();

// Calls the "alert" function with the message "done!" after 400ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(alert);

// Calls the "alert" function with the message "done!" after 1500ms - alert('done!');
document.getElementById(evt.target.id).fadeIn(1500, alert);

javascript fadein fadeout

var slideSource = document.getElementById('slideSource');

document.getElementById('handle').onclick = function () {
  slideSource.classList.toggle('fade');
}

javascript fadein fadeout

<button id="handle">Fade</button> 
<div id="slideSource">Whatever you want here - images or text</div>
 Run code snippet

javascript fadeout without jquery

if (!Element.prototype.fadeIn) {
    Element.prototype.fadeIn = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        this.style.opacity = 0;
        this.style.filter = "alpha(opacity=0)";
        this.style.display = "inline-block";
        this.style.visibility = "visible";

        let $this = this,
            opacity = 0,
            timer = setInterval(function() {
            opacity += 50 / ms;
            if( opacity >= 1 ) {
                clearInterval(timer);
                opacity = 1;

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}

if (!Element.prototype.fadeOut) {
    Element.prototype.fadeOut = function(){
        let ms = !isNaN(arguments[0]) ? arguments[0] : 400,
            func = typeof arguments[0] === 'function' ? arguments[0] : (
                typeof arguments[1] === 'function' ? arguments[1] : null
            );

        let $this = this,
            opacity = 1,
            timer = setInterval( function() {
            opacity -= 50 / ms;
            if( opacity <= 0 ) {
                clearInterval(timer);
                opacity = 0;
                $this.style.display = "none";
                $this.style.visibility = "hidden";

                if (func) func('done!');
            }
            $this.style.opacity = opacity;
            $this.style.filter = "alpha(opacity=" + opacity * 100 + ")";
        }, 50 );
    }
}