Javascript-форум - Анимация с добавлением класса

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Анимация с добавлением класса (https://javascript.ru/forum/jquery/39345-animaciya-s-dobavleniem-klassa.html)

Анимация с добавлением класса

Добрый день!
Делаю раскрывающийся список с добавлением css класса. Классы добавляются, все работает. Но как сделать, чтобы класс удалялся когда content полностью свернулся (закончилась анимация сворачивания), а не сразу после клика на header. Отдельные события на сворачивание и разворачивание делать?
Вот мой код

$(document).ready(function(){
	$(".content").hide();
	$(".header").click(function(){
		$(this).next().slideToggle();
		$(this).parent().toggleClass('shadow');
	});
});

<div class="new_department">
		<div class="header">2 новых отделения</div>
		<div class="content"><h3>ст. Шелковская</h3><p>Операционный офис</p><p>ул. Советская, 50</p></div>
</div>

Ahsar,
документацию на slideToggle([duration],[callback]):прочтите callback — функция, заданная в качестве обработчика завершения анимации (появления или скрытия).

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
  <style type="text/css">
 .shadow {
    background: #fc0; /* Цвет фона */
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Firefox */
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Для Safari и Chrome */
    box-shadow: 0 0 10px rgba(0,0,0,0.5); /* Параметры тени */
    padding: 10px;
   }
  </style>
</head>
<body>
  <div class="new_department">
		<div class="header">2 новых отделения</div>
		<div class="content"><h3>ст. Шелковская</h3><p>Операционный офис</p><p>ул. Советская, 50</p></div>
</div>

<script>
$(document).ready(function () {
    $(".content").hide();
    var n = 1;
    $(".header").click(function () {

        if (n) $(this).parent().toggleClass('shadow');
        $(this).next().slideToggle(500, function () {

            if (!n) $(this).parent().toggleClass('shadow');
            n ^= 1
        });

    });
});</script>

</body>
</html>

Я хочу чтобы класс был пока он хоть немного развернут. А в данном случае он появляется только после полного разворачивания.
Т.е. Как только начал разворачиваться - класс присвоился. Когда закончил сворачиваться только тогда удалился класс

Т.е. разворачивался как у меня, а сворачивался как у тебя :)

примерно так:

можно переменную взять:
var tog = true;

  $(document).ready(function(){
    $(".content").hide();
    $(".header").click(function()
         {
        if (tog)
            {
            $(this).next().slideToggle(500, function ()
                 {
                 $(this).parent().toggleClass('shadow');
                 });
            }
        else
            {
             $(this).next().slideToggle();
             $(this).parent().toggleClass('shadow');
            }
        tog = !tog;
        });
});

Огромное спасибо!
То что хотел :)

Цитата:

Сообщение от Ahsar

Т.е. разворачивался как у меня, а сворачивался как у тебя

Ahsar,
смотрите код во 2 посте.