Skip to content

Instantly share code, notes, and snippets.

@chrisbuttery

chrisbuttery/1.js

Last active April 6, 2024 16:10
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chrisbuttery/cf34533cbb30c95ff155 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chrisbuttery/cf34533cbb30c95ff155 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. chrisbuttery revised this gist Jul 23, 2014. 1 changed file with 5 additions and 0 deletions.
    5 changes: 5 additions & 0 deletions usage.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    var el = document.getElementById("lga");

    fadeOut(el);
    fadeIn(el);
    fadeIn(el, "inline-block");
  2. chrisbuttery revised this gist Jul 23, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion 5.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    // fade out
    // fade in

    function fadeIn(el, display){
    el.style.opacity = 0;
  3. chrisbuttery revised this gist Jul 23, 2014. 1 changed file with 16 additions and 0 deletions.
    16 changes: 16 additions & 0 deletions 5.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,16 @@
    // fade out

    function fadeIn(el, display){
    el.style.opacity = 0;
    el.style.display = display || "block";

    (function fade() {
    var val = parseFloat(el.style.opacity);
    var proceed = ((val += 0.1) > 1) ? false : true;

    if (proceed) {
    el.style.opacity = val;
    requestAnimationFrame(fade);
    }
    })();
    }
  4. chrisbuttery renamed this gist Jul 23, 2014. 1 changed file with 0 additions and 0 deletions.
    0 gistfile1.txt → 4.js
    View file
    File renamed without changes.
  5. chrisbuttery revised this gist Jul 23, 2014. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    // fade out

    function fadeOut(el){
    el.style.opacity = 1;

    (function fade() {
    if ((el.style.opacity -= .1) < 0) {
    el.style.display = "none";
    } else {
    requestAnimationFrame(fade);
    }
    })();
    }

    // fade in

    function fadeIn(el, display){
    el.style.opacity = 0;
    el.style.display = display || "block";

    (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
    el.style.opacity = val;
    requestAnimationFrame(fade);
    }
    })();
    }
  6. chrisbuttery revised this gist Jul 23, 2014. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions 3.js
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@ function fadeOut(el){
    if ((el.style.opacity -= .1) < 0) {
    el.style.display = "none";
    } else {
    requestAnimationFrame(fade, 40);
    requestAnimationFrame(fade);
    }
    })();
    }
    @@ -22,7 +22,7 @@ function fadeIn(el){
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
    el.style.opacity = val;
    requestAnimationFrame(fade, 40);
    requestAnimationFrame(fade);
    }
    })();
    }
  7. chrisbuttery revised this gist Jul 23, 2014. 1 changed file with 28 additions and 0 deletions.
    28 changes: 28 additions & 0 deletions 3.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    // fade out

    function fadeOut(el){
    el.style.opacity = 1;

    (function fade() {
    if ((el.style.opacity -= .1) < 0) {
    el.style.display = "none";
    } else {
    requestAnimationFrame(fade, 40);
    }
    })();
    }

    // fade in

    function fadeIn(el){
    el.style.opacity = 0;
    el.style.display = "block";

    (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
    el.style.opacity = val;
    requestAnimationFrame(fade, 40);
    }
    })();
    }
  8. chrisbuttery revised this gist Jul 23, 2014. 2 changed files with 28 additions and 0 deletions.
    0 index.js → 1.js
    View file
    File renamed without changes.
    28 changes: 28 additions & 0 deletions 2.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,28 @@
    // fade out

    function fadeOut(el){
    el.style.opacity = 1;

    (function fade() {
    if ((el.style.opacity -= .1) < 0) {
    el.style.display = "none";
    } else {
    setTimeout(fade, 40);
    }
    })();
    }

    // fade in

    function fadeIn(el){
    el.style.opacity = 0;
    el.style.display = "block";

    (function fade() {
    var val = parseFloat(el.style.opacity);
    if (!((val += .1) > 1)) {
    el.style.opacity = val;
    setTimeout(fade, 40);
    }
    })();
    }
  9. chrisbuttery created this gist Jul 23, 2014.
    29 changes: 29 additions & 0 deletions index.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    // fade out

    function fade(el) {
    var op = 1;
    var timer = setInterval(function () {
    if (op <= 0.1){
    clearInterval(timer);
    el.style.display = 'none';
    }
    el.style.opacity = op;
    op -= op * 0.1;
    }, 50);
    }

    // fade in

    function fadeIn(el) {
    var op = 0;
    el.style.opacity = op;
    el.style.display = 'inline-block';

    var timer = setInterval(function () {
    if (op >= 1.0){
    clearInterval(timer);
    }
    el.style.opacity = op;
    op = op + 0.1;
    }, 50);
    }