Плавность анимации при отображении / скрытии элемента

@bb_oo · Регистрация: 22.11.2013

Author24 — интернет-сервис помощи студентам

А как вот быть со slideToggle()? Это уже вопрос не по этой теме, но все же) Дело в том, что у меня ".box-content" показывается\скрывает не плавно. Он дергается в конце анимации. Как исправить? Наверное дело в позиционировании эл-ов?

HTML5

<div class="box inner">
            <div class="box-heading">
                <h2 class="th-2">brands</h2>
            </div>
            <span class="tog_btn tgbm"></span>
            <div class="box-content inner">
                <ul id="brands"> 
                    <li><a href="#"><img src="https://www.cyberforum.ru/images/slider2/logo-nyt.png" /></a></li>
                    <li><a href="#"><img src="https://www.cyberforum.ru/images/slider2/logo-nike.png" /></a></li>
                    <li><a href="#"><img src="https://www.cyberforum.ru/images/slider2/logo-microsoft.png" /></a></li>
                    <li><a href="#"><img src="https://www.cyberforum.ru/images/slider2/logo-android.png" /></a></li>
                    <li><a href="#"><img src="https://www.cyberforum.ru/images/slider2/logo-amazon.png" /></a></li>
                </ul>
                <div class="both"></div>
            </div>
        </div>

CSS

.box {
    margin-top: 50px !important;
    margin-bottom: 40px;
}
.box-heading {
    width: 100%;
    height: 27px;
    background: url($img_path + 'ruler.png') center repeat-x;
    > h2 {
        color: #747272;
        background: #fff;
        display: inline-block;
        padding-right: 3px;
        position: relative;
        top: 4px;
        text-transform: uppercase;
    }
}
.box-content {
    width: 100%;
    margin-top: 33px;
}

@Dolphin · 10.03.2015, 19:13

может slideToggle('slow')

@bb_oo · 10.03.2015, 19:15 **[ТС]**

дело не в этом. У меня так и прописано.

@msheal · 10.03.2015, 19:59

Можно увидеть фрагмент кода с анимацией?

@bb_oo · 10.03.2015, 20:35 **[ТС]**

я уже дописал) проблему решил тем, что переместил <span> (кнопку) в самое начало. И все)

Но вот осталась вторая часть. У меня кнопка "-", когда её присвоен класс "tog_btn tgbm". При клика на неё должен присвоиться класс "tog_btn tgbp" вместо "tog_btn tgbm". Как такое сделать?

@Dolphin · 10.03.2015, 21:04

Javascript

1
2
3

$('.tog_btn.tgbm').click(function(){
    $(this).removeClass('tgbm').addClass('tgbm');
});

@bb_oo · 11.03.2015, 14:15 **[ТС]**

Спасибо. Но мне ще нужно обратное действие при повторном клике. Пробовал так - не получается. Оно скрывается и все. но не раскрывается при следующем клике

Javascript

$('.tog_btn.tgbm').click(function(){
        $(this).parent().find('.box-content').slideUp('slow');
        $(this).removeClass('tgbm').addClass('tgbp');
    });
 
    $('.tog_btn.tgbp').click(function(){
        $(this).parent().find('.box-content').slideDown('slow');
        $(this).removeClass('tgbp').addClass('tgbm');
    });

@Dolphin 814 / 797 / 201 Регистрация: 21.09.2012 Сообщений: 2,656
	10.03.2015, 19:13	2
	может slideToggle('slow') 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	10.03.2015, 19:15 [ТС]	3
	дело не в этом. У меня так и прописано. 0

@msheal 707 / 309 / 191 Регистрация: 05.03.2015 Сообщений: 822
	10.03.2015, 19:59	4
	Можно увидеть фрагмент кода с анимацией? 0

@bb_oo 15 / 15 / 9 Регистрация: 22.11.2013 Сообщений: 762
	10.03.2015, 20:35 [ТС]	5
	я уже дописал) проблему решил тем, что переместил <span> (кнопку) в самое начало. И все) Но вот осталась вторая часть. У меня кнопка "-", когда её присвоен класс "tog_btn tgbm". При клика на неё должен присвоиться класс "tog_btn tgbp" вместо "tog_btn tgbm". Как такое сделать? 0

	11.03.2015, 14:15