Форум

Ahsar · #1 (**permalink**) 26.06.2013, 09:46

Добрый день!
Делаю раскрывающийся список с добавлением 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>

рони · #2 (**permalink**) 26.06.2013, 10:26

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>

Ahsar · #3 (**permalink**) 26.06.2013, 10:57

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

Ahsar · #4 (**permalink**) 26.06.2013, 11:02

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

skrudjmakdak · #5 (**permalink**) 26.06.2013, 11:07

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

можно переменную взять:
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 · #6 (**permalink**) 26.06.2013, 11:11

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

рони · #7 (**permalink**) 26.06.2013, 11:22

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

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

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

Форум

Справочник

Discord чат

Курсы javascript