DIV появляется вместо метода slideDown ()
У меня проблема, похожая на ту, что обнаружена в эта ветка. Однако разница с моей в том, что у меня есть ширина, установленная в CSS. В моем коде два div последовательно используют slideDown() для создания эффекта плавного перехода. Первый div tail работает точно так, как ожидалось, но на втором head он просто появляется, независимо от того, сколько времени я добавляю к нему.
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('.tail').hide();
$('.head').hide()
$("#button265764").click(function() {
$(".tail").slideUp().delay(0).slideDown(2000, "swing");
$(".head").slideUp().delay(2000).slideDown(1000, "swing");
$('#button265764').unbind('click');
});
});
</script>
<style>
<!-- not used in this transition) -->
.h_tail {
position: relative;
margin-top: 10px;
height: 10px;
width: 100px;
background-color: #73aae7;
margin-left: 5px;
transform: translateX(75px);
}
.tail {
position: relative;
width: 10px;
height: 50px;
background-color: #73aae7;
margin-left: 5px;
}
.head {
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #73aae7;
margin-left: 0;
}
</style>
<!--Stand-in, actual button is elsewhere-->
<div id = "button265764">click me
</div>
<div class = "tail">
</div>
<div class = "head">
</div>Я подумал, что это может быть из-за того, что ширина головы равна 0, но если я изменил это на что-то вроде 10 пикселей просто для проверки, он все равно просто появится без эффекта slideDown. Задержка для действия головы работает нормально, так что дело не только в том, что вся эта строка кода не работает.
РЕДАКТИРОВАТЬ: Дополнительная информация, которая может помочь:
Я думаю, что могу окончательно исключить проблему, связанную с последовательностью методов slideDown. Я добавил второй блок tail (который я назвал tail2), и он тоже работал нормально. Проблема определенно связана с чем-то в блоке head.
Этот код для справки:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.tail').hide();
$('.tail2').hide();
$('.head').hide()
$("#button265764").click(function(){
$(".tail").slideUp().delay(0).slideDown(2000, "swing");
$(".tail2").slideUp().delay(2000).slideDown(2000, "swing");
$(".head").slideUp().delay(4000).slideDown(1000, "swing");
$('#button265764').unbind("click");
});
});
</script>
<style>
.h_tail {
position: relative;
margin-top: 10px;
height: 10px;
width: 100px;
background-color: #73aae7;
margin-left: 5px;
transform: translateX(75px);
}
.tail {
position: relative;
width: 10px;
height: 50px;
background-color: #73aae7;
margin-left: 5px;
}
.tail2 {
position: relative;
width: 10px;
height: 50px;
background-color: #73aae7;
margin-left: 5px;
}
.head {
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #73aae7;
margin-left: 0;
}
</style>
<div id = "button265764">click me
</div>
<div class = "tail">
</div>
<div class = "tail2">
</div>
<div class = "head">
</div>Я пробовал все это, а также не устанавливал ни одного, все заканчивается одинаково.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Причина, по которой это происходит, заключается в том, что ваша стрелка отображается с границами CSS.
slideDown() и slideUp() анимируют только высоту элемента и, следовательно, только то, что содержится внутри него.
Граница существует за пределами элемента и поэтому на нее не влияет, она «всплывает», потому что когда jQuery начинает анимацию, он сначала отображает элемент, который будет отображать элемент, но с нулевой высотой.
Чтобы проиллюстрировать, у вас может быть элемент с нулевой высотой и шириной, но он все равно будет отображать его границу:
<style>
.an_element {
position: relative;
height: 0px;
width: 0px;
border: 10px solid #73aae7;
}
</style>
<div class = "an_element"></div>Вышеупомянутый div не имеет высоты, но по-прежнему отображает его границу, потому что граница - это так называемый «внешний html», а не внутри div.
Не волнуйтесь, это очень легко исправить, все, что вам нужно сделать, это анимировать вместо этого контейнер div:
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#button265764").click(function() {
$(".container").slideDown(2000, "swing");
$('#button265764').unbind('click');
});
});
</script>
<style>
.h_tail {
position: relative;
margin-top: 10px;
height: 10px;
width: 100px;
background-color: #73aae7;
margin-left: 5px;
transform: translateX(75px);
}
.tail {
position: relative;
width: 10px;
height: 50px;
background-color: #73aae7;
margin-left: 5px;
}
.head {
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #73aae7;
margin-left: 0;
}
.container {
display: none;
}
</style>
<div id = "button265764">click me</div>
<div class = "container">
<div class = "tail"></div>
<div class = "head"></div>
</div>Это также избавит вас от хлопот по цепочке анимации нескольких элементов.
Ах, я не понимал, что граница на самом деле не существует внутри самого div, теперь понятно, почему она не работает. Спасибо!
Вы пробовали slideDown - медленный, линейный и быстрый для плавного перехода, как Swing "- медленнее движется в начале / конце, но быстрее в середине