Breaking News: Grepper is joining You.com. Read the official announcement!

javascript fadeout without jquery

Add Answer

Mad developer answered on December 15, 2020 Popularity 10/10 Helpfulness 1/10

answer javascript fadeout without jquery

related fadein fadeout jquery

related jquery fade out

related jquery fadeout and remove

related jquery fadeout to fadein

related fadein without jquery

related javascript fadeout without jquery

javascript fadeout without jquery

Comment

-1

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 );
    }
}

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: stackoverflow.com

Tags: fadeout javascript jquery

Link to this answer
Share Copy Link

Contributed on Jun 11 2021

Mad developer

0 Answers Avg Quality 2/10

Closely Related Answers

fadein fadeout jquery

Comment

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

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

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: fadein fa

Link to this answer
Share Copy Link

Contributed on Dec 15 2020

Zidane (Vi Ly - VietNam)

0 Answers Avg Quality 2/10

jquery fade out

Comment

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

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: fade

Link to this answer
Share Copy Link

Contributed on Dec 30 2020

Malario

0 Answers Avg Quality 2/10

jquery fadeout and remove

Comment

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

Popularity 9/10 Helpfulness 5/10 Language javascript

Source: stackoverflow.com

Tags: fadeout

Link to this answer
Share Copy Link

Contributed on Aug 01 2021

D3signa

0 Answers Avg Quality 2/10

jquery fadeout to fadein

Comment

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

Popularity 10/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: fadein fa

Link to this answer
Share Copy Link

Contributed on Jun 16 2021

Mingles444

0 Answers Avg Quality 2/10

fadein without jquery

Comment

function toggleFade(elem, speed ) {
    //Add Opacity Property if it doesnt exist
    if (!elem.style.opacity) elem.style.opacity = 1;
  
  if (elem.style.opacity <= 0) {
    var inInterval = setInterval(function() {
      elem.style.opacity = Number(elem.style.opacity)+0.02;
      if (elem.style.opacity >= 1)
        clearInterval(inInterval);
    }, speed/50 );
  }else{ // end if
    var outInterval = setInterval(function() {
        elem.style.opacity -= 0.02;
    if (elem.style.opacity <= 0)
        clearInterval(outInterval);
    }, speed/50 );
  }
}
// HOW TO USE
// 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);

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: fadein fa

Link to this answer
Share Copy Link

Contributed on Dec 01 2022

0 Answers Avg Quality 2/10

javascript fadeout without jquery

Comment

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);

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: fadeout

Link to this answer
Share Copy Link

Contributed on Jun 11 2021

Mad developer

0 Answers Avg Quality 2/10

javascript fadeout without jquery

Contents

More Related Answers

javascript fadeout without jquery

Closely Related Answers

fadein fadeout jquery

jquery fade out

jquery fadeout and remove

jquery fadeout to fadein

fadein without jquery

javascript fadeout without jquery

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.