Я применил эффект затухания при нажатии на основной текст. но div за ним немного грубо во время эффекта. Скрытый текст появляется с эффектом появления, но div - нет.
Как я могу заставить div исчезать вместе с текстом. вот скрипка http://jsfiddle.net/BreMW/826/

$(document).ready(function(){
    $(".toggle").click(function(){
       $(this).find(".hide").fadeToggle();
    });
});
.hide {
  display: none;
}
@import url(https://fonts.googleapis.com/css?family=Questrial);

   .spcredit{
    color:#666666;
    font-family: 'Questrial', sans-serif;
    text-transform:uppercase;
    font-size:9px;
    }
.category {
width:440px;
padding-top:10px;
margin-bottom:40px;
background:white;
text-align:justify;
box-shadow:0px 3px 10px rgba(0,0,0,.15)
}
<div class="category" style="line-height:150%;"><center>


<div class="spcredit">
<div class="toggle"><a href="javascript:void(0);">text1</a>
<div class="hide">
hidden text1
</div></div>

</div>
FIDDLE .
3
user5530936 17 Дек 2015 в 18:25

3 ответа

Лучший ответ

Используйте slideToggle() вместо fadeToggle()

Редактировать: Если вы хотите, чтобы и выцветание, и скольжение вам понадобилось, используйте для этого другую обертку. Отредактированная скрипка

4
okolimar 17 Дек 2015 в 15:45

Проблема в вашем div классе category. Он регулирует свою высоту в соответствии с новым элементом, так что он выходит за пределы анимации.

Следующее создает достойную анимацию.

var hidden = true;
$(document).ready(function(){
    $(".toggle").click(function(){
       if (hidden) {
         $(".category").animate({
          height: '+='+ $(".category").height() + 'px'
         }, 1000);
         hidden = false;
       }
       else {
         $(".category").animate({
          height: '-='+ $(".category").height() / 2 + 'px'
         }, 1000);
         hidden = true;
       }
       $(this).find(".hide").fadeToggle();
    });
});

Вот скрипка

0
Oss 17 Дек 2015 в 15:40

Вы можете использовать .parent() в $(this), а затем вызвать .toggle() вместо fadeToggle(). Вы также можете выбрать скорость. Смотрите код здесь Fiddle

0
dirgepye 17 Дек 2015 в 16:46