javascript - DIV 突然出现而不是 slideDown() 方法发生

Question

我有一个类似于 this thread 中发现的问题.然而，与我的不同之处在于我在 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，但如果我将其更改为 10px 之类的东西只是为了测试，它仍然只是弹出而没有 slideDown 效果。头部 Action 的延迟效果很好，所以这不仅仅是整个代码行没有运行的问题。

编辑:一些可能有帮助的附加信息:

我想我可以明确排除 slideDown 方法按顺序排列的问题。我添加了第二个 tail div(我称之为 tail2)，效果也很好。这个问题肯定与 head div 相关。

引用代码:

<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>

Answer 1

发生这种情况的原因是因为您的箭头是用 CSS 边框呈现的。

slideDown() 和 slideUp() 仅对元素的高度进行动画处理，因此仅对其中包含的内容进行动画处理。

边框存在于元素外部，因此不受影响，它“弹出”存在，因为当 jQuery 开始动画时，它首先显示元素，这将渲染元素但高度为 0。

为了说明，你可以有一个高度和宽度为 0 的元素，但它仍然会呈现它的边框:

<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>

这样做还可以省去为多个元素制作链式动画的麻烦。