jQuery addClass example

Change class name on click in jQuery

HTML

<div class="shit">
  <span>Охренеть...</span>
  <span>Работает...</span>
</div>

<div class="toster">
  Toster помог ошалелому, ура!
</div>

<pre><code class="js">

// Вот код для подложки
// наведение
document.body.addEventListener("mouseenter", function(e) {
  if (e.target.classList.contains('item')) {
  
  	console.log('in');

    let item = e.target;
    let itemShadowGap = 15;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemBottom = item.querySelectorAll('.button')[0];
    let itemShadowHeight = itemShadow.scrollHeight + itemBottom.scrollHeight + itemShadowGap;

    // проверяем, нет ли атрибута
    if (!item.hasAttribute('data-shadow-limiter-delay')) {
      item.setAttribute('data-shadow-limiter-delay', true);
      itemShadow.style.maxHeight = '' + itemShadowHeight + 'px';
    }

    item.style.zIndex = '10';
    itemShadow.style.height = '' + itemShadowHeight + 'px';

  }
}, true);

// отведение
document.body.addEventListener("mouseleave", function(e) {
  if (e.target.classList.contains('item')) {
  
  	console.log('out');

    let item = e.target;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemShadowHeight = itemShadow.scrollHeight;

    // убираем максимальную высоту и атрубут по задержке
    if (item.hasAttribute('data-shadow-limiter-delay')) {
      setTimeout(function() {
        item.removeAttribute('data-shadow-limiter-delay');
        itemShadow.style.maxHeight = '';
      }, 3000);
    }

    item.style.zIndex = '';
    itemShadow.style.height = '';

  }
}, true);
</code></pre>

<div class="container">

  <h2><i style=" background: rgba(139, 195, 74, 0.2); color: rgba(139, 195, 74, 1); "><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 26 26" enable-background="new 0 0 26 26" class="mdl-js" style=" width: 25px; ">
        <path d="m.3,14c-0.2-0.2-0.3-0.5-0.3-0.7s0.1-0.5 0.3-0.7l1.4-1.4c0.4-0.4 1-0.4 1.4,0l.1,.1 5.5,5.9c0.2,0.2 0.5,0.2...

CSS

body {
  margin: 0;
  padding: 0 0 0 0;
  font: 16px Montserrat, sans-serif;
  background: #fff;
  position: relative;
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/**/
pre {
  max-width: 700px;
  margin: 0 auto 50px auto;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, .2);
}

pre>code.hljs {
  padding: 0 30px 20px 30px !important;
  background: #fff;
}

/**/
.shit {
  position: relative;
  width: 100%;
  height: 200px;
  background: url(https://media.istockphoto.com/illustrations/comparison-between-human-and-gorilla-skeleton-illustration-id973837122) no-repeat center top;
  background-size: 360px;
  transform: scale(1, -1);
  margin-bottom: 30px;
  transition: transform .5s;
}

.shit span {
  transform: scale(1, -1);
  display: inline-block;
  position: absolute;
}

.shit span:before {
  content: "";
  width: 30px;
  height: 30px;
  border-radius: 40px 0 0 0;
  border-top: 2px dashed;
  border-left: 2px dashed;
  display: block;
  position: absolute;
  top: -37px;
  right: 10px;
  opacity: .25;
}

.shit span:nth-child(1) {
  left: calc(50% - 235px);
  bottom: 80px;
  color: #03A9F4;
}

.shit span:nth-child(1):before {
  top: -37px;
  right: 10px;
}

.shit span:nth-child(2) {
  left: calc(50% + 131px);
  bottom: 120px;
  color: #E91E63;
}

.shit span:nth-child(2):before {
  top: -37px;
  left: 10px;
  transform: scale(-1, 1);
}

/**/
.toster {
  text-align: center;
  font-size: 2rem;
  font-weight: bold;
  margin: 0 0 50px 0;
}

/**/
.note {
  position: fixed;
  bottom: 15px;
  padding: 15px;
  width: 300px;
  font-size: .75em;
  text-align: center;
  background: #673AB7;
  z-index: 100;
  border-radius: 10px;
  line-height: 1rem;
  color: #fff;
  left: 50%;
  transform: translateX(-50%);
  transition: transform .5s;
}

.note svg {
  display: inline-block;
  width: 20px;
  margin: 0 5px 5px 5px;
}

.note #cross {
  fill: #fff;
  margin: 0;
  position: absolute;
  top: 10px;
...

JavaScript

// Вот код для подложки
// наведение
document.body.addEventListener("mouseenter", function(e) {
  if (e.target.classList.contains('item')) {
 
    let item = e.target;
    let itemShadowGap = 15;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemBottom = item.querySelectorAll('.button')[0];
    let itemShadowHeight = itemShadow.scrollHeight + itemBottom.scrollHeight + itemShadowGap;

    // проверяем, нет ли атрибута
    if (!item.hasAttribute('data-shadow-limiter-delay')) {
      item.setAttribute('data-shadow-limiter-delay', true);
      itemShadow.style.maxHeight = '' + itemShadowHeight + 'px';
    }

    item.style.zIndex = '10';
    itemShadow.style.height = '' + itemShadowHeight + 'px';

  }
}, true);

// отведение
document.body.addEventListener("mouseleave", function(e) {
  if (e.target.classList.contains('item')) {
  
    let item = e.target;
    let itemShadow = item.querySelectorAll('.shadow')[0];
    let itemShadowHeight = itemShadow.scrollHeight;

    // убираем максимальную высоту и атрубут по задержке
    if (item.hasAttribute('data-shadow-limiter-delay')) {
      setTimeout(function() {
        item.removeAttribute('data-shadow-limiter-delay');
        itemShadow.style.maxHeight = '';
      }, 3000);
    }

    item.style.zIndex = '';
    itemShadow.style.height = '';

  }
}, true);











// Скрыть памятку ближе к подвалу
$(window).scroll(function() {
  if ($(window).scrollTop() + $(window).height() > $(document).height() - 300) {
    $('.note').addClass('is--hidden');
  } else {
    $('.note').removeClass('is--hidden');
  }
});

// Закрытие памятки
$(".note #cross").on("click", function() {
  $(".note").toggle();
});