Действие после события

[ureech]

Привет. Клик по блоку закрывает его и при условии, что он находится сверху другого блока, меняется цвет.

var bodyChat = document.querySelector('.form-body');
        $('.float-chat').on('click', function (e) {
            bodyChat.classList.toggle('show');
            if (icms.chat.elementIsVis('.icms-footer__middle')) {
                if (float_chat.style.color != "") {
                    float_chat.style = ""
                } else {
                    float_chat.style.backgroundColor = '#ecccbd';
                    float_chat.style.color = '#1c223e';
                }
            }
});

<style>
.form-body {
    position: relative;
    width:100%;
    height:100%;
    margin-bottom:-300px;
    transition: margin 0.5s linear;
}
</style>

Как сделать, что бы цвет менялся после завершения toggle()? То есть, после того, как блок закроется, а не во время клика.

[voraa]

Через timeout можно

var bodyChat = document.querySelector('.form-body');
$('.float-chat').on('click', function (e) {
	bodyChat.classList.toggle('show');
	if (icms.chat.elementIsVis('.icms-footer__middle')) {
		setTimeout (() => {
			if (float_chat.style.color != "") {
				float_chat.style = ""
			} else {
				float_chat.style.backgroundColor = '#ecccbd';
				float_chat.style.color = '#1c223e';
			}
		}, 0);
	}
});

[Aetae]

Таймаут это кривой костыль, есть событие transitionend. T.e. что-то типа:

var bodyChat = document.querySelector('.form-body');
$('.float-chat').on('click', function (e) {
  bodyChat.classList.toggle('show');
  $(bodyChat).one('transitionend', function() {
    if (icms.chat.elementIsVis('.icms-footer__middle')) {
      if (float_chat.style.color != "") {
        float_chat.style = ""
      } else {
        float_chat.style.backgroundColor = '#ecccbd';
        float_chat.style.color = '#1c223e';
      }
    }
  })
});

Только не надо мешать ванилу с jquery, пишите в одном стиле, в вание:

const bodyChat = document.querySelector('.form-body');
const floatChat = document.querySelector('.float-chat');

floatChat.addEventListener('click', () => {
  bodyChat.classList.toggle('show');
  bodyChat.addEventListener('transitionend', () => {
    if (icms.chat.elementIsVis('.icms-footer__middle')) {
      if (floatChat.style.color !== "") {
        floatChat.removeAttribute('style');
      } else {
        floatChat.style.backgroundColor = '#ecccbd';
        floatChat.style.color = '#1c223e';
      }
    }
  }, { once: true });
});

или в jquery

var $bodyChat = $('.form-body');
var $floatChat = $('.float-chat');

$floatChat.on('click', function () {
  $bodyChat.toggleClass('show');
  $bodyChat.one('transitionend', function () {
    if (icms.chat.elementIsVis('.icms-footer__middle')) {
      if ($floatChat.css('color') !== '') {
        $floatChat.removeAttr('style');
      } else {
        $floatChat.css({
          backgroundColor: '#ecccbd',
          color: '#1c223e'
        });
      }
    }
  });
});

[voraa]

floatChat.removeAttribute('style');

А что, точно известно, что через style не задано никаких других свойств?

[ureech]

Всё понятно, большое всем спасибо.

А что, точно известно, что через style не задано никаких других свойств?

Да.

Только не надо мешать ванилу с jquery

Есть такой грешок)