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效果。头部动作的延迟工作正常，所以这不仅仅是整个代码行没有运行的问题。

编辑 ：一些可能有用的其他信息：

我认为我可以明确地排除问题，因为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()仅动画元素的高度，因此只包含其中包含的内容。

边框存在于元素之外，因此不受影响，它会弹出＆＃34;弹出＆＃34;存在因为当jQuery开始动画时它首先显示元素，这将呈现元素但是高度为0。

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

＆＃13;

<style>
.an_element {
    position: relative;
    height: 0px;
    width: 0px;
    border: 10px solid #73aae7;
}
</style>
<div class="an_element"></div>

＆＃13;

上面的div没有高度，但它仍然呈现它的边界，因为边框是所谓的＆＃34;外部html＆＃34;，它实际上不在div内。

不过不用担心，这很容易解决，所有你需要做的就是为容器div设置动画：

＆＃13;

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

＆＃13;

这样做还可以省去链动画中几个元素的麻烦。

DIV弹出而不是slideDown（）方法发生

1 个答案: