Skip to main content
deleted 18 characters in body; edited title
Source Link
Jamal
  • 34.9k
  • 13
  • 133
  • 237

Fade in-in and fade out-out in pure javascriptJavaScript

I decided to build my own fade in-in fade out-out function, since that is all I need on my page.

Here it is. Please comment on things I can make better! Please comment on things I can make better.

Fade in and fade out in pure javascript

I decided to build my own fade in fade out function, since that is all I need on my page.

Here it is. Please comment on things I can make better!

Fade-in and fade-out in pure JavaScript

I decided to build my own fade-in fade-out function, since that is all I need on my page.

Please comment on things I can make better.

Rolled back to Rev 1 (plus [animation] tag), since all existing answers predate the code added in Rev 2
Link
200_success
  • 144.2k
  • 22
  • 188
  • 473
Rollback to Revision 1
Source Link
200_success
  • 144.2k
  • 22
  • 188
  • 473

NEW VERSION:

var done = true,
    fading_div = document.getElementById('fading_div'),
    fade_in_button = document.getElementById('fade_in'),
    fade_out_button = document.getElementById('fade_out');

function function_opacity(opacity_value) {
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}

function function_fade_out(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

function function_fade_in(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'block';
    }
    if (opacity_value == 100) {
        done = true;
    }
}
// fade in button
fade_in_button.onclick = function () {
    if (done && fading_div.style.opacity !== '1') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_in(x)
                };
            })(i), i * 10);
        }
    }
};
// fade out button
fade_out_button.onclick = function () {
    if (done && fading_div.style.opacity !== '0') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_out(x)
                };
            })(100 - i), i * 10);
        }
    }
};

OLD VERSION:

NEW VERSION:

var done = true,
    fading_div = document.getElementById('fading_div'),
    fade_in_button = document.getElementById('fade_in'),
    fade_out_button = document.getElementById('fade_out');

function function_opacity(opacity_value) {
    fading_div.style.opacity = opacity_value / 100;
    fading_div.style.filter = 'alpha(opacity=' + opacity_value + ')';
}

function function_fade_out(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'none';
        done = true;
    }
}

function function_fade_in(opacity_value) {
    function_opacity(opacity_value);
    if (opacity_value == 1) {
        fading_div.style.display = 'block';
    }
    if (opacity_value == 100) {
        done = true;
    }
}
// fade in button
fade_in_button.onclick = function () {
    if (done && fading_div.style.opacity !== '1') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_in(x)
                };
            })(i), i * 10);
        }
    }
};
// fade out button
fade_out_button.onclick = function () {
    if (done && fading_div.style.opacity !== '0') {
        done = false;
        for (var i = 1; i <= 100; i++) {
            setTimeout((function (x) {
                return function () {
                    function_fade_out(x)
                };
            })(100 - i), i * 10);
        }
    }
};

OLD VERSION:

edited tags
Link
200_success
  • 144.2k
  • 22
  • 188
  • 473
Loading
Question Protected by Mathieu Guindon
Tweeted twitter.com/#!/StackCodeReview/status/153255731469103104
new code
Source Link
Hakan
  • 317
  • 1
  • 2
  • 6
Loading
Source Link
Hakan
  • 317
  • 1
  • 2
  • 6
Loading