Smooth slide fade

Click some "Bye" buttons.

HTML

<div id=boxes></div>

CSS

body {
   margin: 30px 60px;
   }
p {
   padding: 30px;
   }
p:nth-child(3n) {
   background-color: gold;
   }
p:nth-child(3n+1) {
   background-color: lightblue;
   }
p:nth-child(3n+2) {
   background-color: pink;
   }
button {
   padding: 10px 25px;
   cursor: pointer; 
   }

JavaScript

// See: https://stackoverflow.com/a/26329196

const app = {
   slideFade: (elem) => {
      const fade = { opacity: 0, transition: 'opacity 0.5s' };
      elem.css(fade).delay(100).slideUp();
      },
   setup: () => {
      const bye = (event) =>
         app.slideFade($(event.target).parent()); 
      $(window.document).on({ click: bye }, 'button');
      const boxes = $('#boxes');
      while (boxes.children().length < 20)
         boxes.append($('<p><button>Bye</button></p>'));
      }
   };

$(app.setup);