Почему функция анимации скрывает другой div в конце анимации?

код можно найти там http://codepen.io/kongakong/pen/wMQrBR Почему функция анимации скрывает другой div в конце анимации?

Javascript:

$(document).ready(function() { 
    init(); 
}); 

function init() { 
    $('#test').on('click', function() { 
     $('.answer').animate({width: "hide"}, 1000, 'swing'); 

    }); 
}

CSS:

.row { 
    position: relative; 
    overflow-x: hidden; 
} 

.hidden { 
    display: none; 
} 


.answer { 
    font-size: 40px; 
    color: red; 
    width:100%; 

    opacity: 1; 
    z-index: 100; 
    border: 1px solid red; 
    text-align: center; 
    background-color: #fff; 
} 

.answer-new { 
    font-size: 40px; 
    /* to make answer-new on top and cover answer */ 
    position: absolute; 
    border: 1px solid blue; 
    width: 100%; 
    z-index: 1; 
    text-align: center; 
}

HTML

<div class="contrainer"> 
    <div> 
    <input id='test' type='button' value="test"></input> 
    </div> 

    <div class="row"> 
    <div class="answer-new">Under 

    </div> 
    <div class="answer">Top 
    </div> 
    </div> 
    <div class="row"> 
    <div class="answer-new">Under1 

    </div> 
    <div class="answer">Top1 
    </div> 
    </div> 

</div>

Вот скриншот страницы до начала анимации

Когда кнопка нажата, анимация выполняется, как ожидалось. Я ожидаю, что div's css class answer-new останется видимым. Однако в конце все исчезли.

Я попытался использовать '0' вместо 'hidden'. В этом случае текст div answer остается видимым. Не полностью скрыто.

Почему это поведение?

источник

2016-02-10 Anthony Kong

Это потому, что ваши .row ДИВ имеют overflow-x: hidden;, и когда ширина .answer ДИВ становятся скрытыми, то есть не любой ДИВ, кроме .answer-new.

И .answer-new is position:absolute Таким образом, это не ширина/высота. И он скроет все элементы переполнения .row.

To. Заставьте его работать с добавлением отступов до .row Итак, он подсчитывает некоторый интервал.

как она в примере я добавляю padding: 25px 0;. и я даю максимальное значение абсолютному div. top: 0;, чтобы указать позицию.

И добавил margin: -25px 0; в .answer, чтобы отобразить его сверху, как дополнение, добавленное к родительскому div.

CSS:

.row { 
    position: relative; 
    overflow-x: hidden; 
    padding: 25px 0; 
} 

.hidden { 
    display: none; 
} 

.answer { 
    font-size: 40px; 
    color: red; 
    width:100%; 

    opacity: 1; 
    z-index: 100; 
    border: 1px solid red; 
    text-align: center; 
    background-color: #fff; 
    margin: -25px 0; 
} 

.answer-new { 
    font-size: 40px; 
    /* to make answer-new on top and cover answer */ 
    position: absolute; 
    border: 1px solid blue; 
    width: 100%; 
    z-index: 1; 
    text-align: center; 
    top:0; 
}

Working Fiddle

источник

2016-02-10 05:52:12 ketan

Пока я не могу точно объяснить поведение этого сам, я взял на себя смелость ограничивать ширину 1 пиксел и удаление непрозрачности, что исправили проблему

function init() { 
    $('#test').on('click', function() { 
    $('.answer').animate({ 
     width: '1px', 
     opacity: 0 
    }, 2000, "swing"); 
    }); 
}

Updated Fork

источник

2016-02-10 05:39:07

надеюсь, что это помогите вам, я использовал онлайн-jquery. не

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
\t <title></title> 
 
</head> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
 

 
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 

 
<!-- Latest compiled JavaScript --> 
 
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 

 
    
 
<style type="text/css"> 
 
\t .row { 
 
    position: relative; 
 
    overflow-x: hidden; 
 
} 
 

 
.hidden { 
 
    display: none; 
 
} 
 

 

 
.answer { 
 
    font-size: 40px; 
 
    color: red; 
 
    width:100%; 
 

 
    opacity: 1; 
 
    z-index: 100; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
    background-color: #fff; 
 
} 
 

 
.answer-new { 
 
    font-size: 40px; 
 
    /* to make answer-new on top and cover answer */ 
 
    position: absolute; 
 
    border: 1px solid blue; 
 
    width: 100%; 
 
    z-index: 1; 
 
    text-align: center; 
 
} 
 
</style> 
 

 

 
<body> 
 

 
<div class="container"> 
 
    <div> 
 
    <input class="btn btn-default" id='test' type='button' value="test"></input> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="answer-new">Under 
 

 
    </div> 
 
    <div class="answer">Top 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="answer-new">Under1 
 

 
    </div> 
 
    <div class="answer">Top1 
 
    </div> 
 
    </div> 
 

 
</div> 
 
    
 
    <script type="text/javascript"> 
 
    $(document).ready(function(){ 
 
    \t $("#test").click(function(){ 
 
    \t \t $(".answer").animate({width:0,opacity:0},1000); 
 
    \t }); 
 
    }); 
 
    </script> 
 

 
</body> 
 
</html>

источник

2016-02-10 05:49:17

Это потому, что ваш контейнер DIV .row не имеет размерности (ширина, ни высота) самостоятельно, а другой ребенок ДИВ .answer-row имеет абсолютное позиционирование и только размерность по ширине. Поэтому, когда дочерний div .answer скрывается, родитель теряет свое измерение по высоте и фактически становится невидимым.

Если вы предоставите родительскому div .row высоту, когда ребенок div .answer будет скрыт, родитель останется видимым. Следовательно, другой ребенок div .answer-row остается видимым, учитывая его стиль.

See this fiddle, где я добавил высоту до .row.

источник

2016-02-10 05:53:11

ИМХО Я не люблю использовать JQuery/JS для анимации вещи, я хотел бы сделать это с классами CSS

.answer { 
    font-size: 40px; 
    color: red; 
    width:100%; 

    opacity: 1; 
    z-index: 100; 
    border: 1px solid red; 
    text-align: center; 
    background-color: #fff; 

    transition: 0.5s; 
    overflow: hidden; 
} 

.answer.minimized{ 
    width: 0px; 
}

в вашем JS

$('#test').on('click', function() { 
    $('.answer').addClass('minimized'); 
});

Вот demo

источник

2016-02-10 06:02:02

Почему функция анимации скрывает другой div в конце анимации?

ответ

Смежные вопросы