JQuery SlideDown() 延迟了一个词的后半部分

JQuery SlideDown() is delaying second half of a word

我有一个简单的 JQuery 东西,它会在页面准备就绪时激活。两根弦会在不同的时间滑落。

问题是在第一个字符串中,只有前半个字往下滑,后半个字延迟了一瞬间。

谁能告诉我为什么?

这是我的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The KGV Connection</title>
<script src="../jquery-2.1.1.min.js"></script>
<style>
.header{
 background-color:#007B4C;
 width:1280px;
 height:70px;
 position:fixed;
 left:0px;
 top:0px;
 z-index:10;
 }
    .body{
  width:1267px;
  position:relative;
  left:-12px;
  height:1010px;
  background-color:#EDF0F5;
  top:25px;
  z-index:9;
  }      
  .footer{
   background-color:#007B4C;
 width:1267px;
  position:relative;
  left:-12px;
 height:200px;
 top:25px;
 z-index:9;
   }              
               .message{
    font-family:"MS PGothic";
    width:1200px;
    font-size:40px;
    text-align:center;
    position:relative;
    left:50px;
    color:#333333;
    top:200px;
    display:none;
    }
            .congratulations{
    position:relative;
    font-family:"MS PGothic";
    width:300px;
    left:450px;
    top:200px;
    color:#333333;
    font-size:60px;
    display:none;
    }
            </style>
</head>
<body>
<div class="header">
<img src="../Pictures/Logo.png" width="291" height="70" />
</div>
<div class="body">
<h1 class="congratulations">Congratulations!</h1>
<p class="message"><b>Your account has been successfully activated!</b></p>
</div>
<script>
$(document).ready(function(e) {
    $(".congratulations").slideDown(400);
 $(".message").delay(1000).slideDown(400);
});
</script>
<div class="footer"></div>
</body>
</html>
</body>
</html>

您好,问题来自 css class。恭喜 增加到 width:500px //这将解决半字滑动的问题

这是因为包含字符串 "Congratulations!" 的 h1 元素小于呈现的文本,并且 jQuery 显然在 [=19] 上应用了动画=]h1 元素首先,它只裁剪字符串的一小部分。

删除 .congratulations class 的 width 属性 或使其比文本更宽。

我建议你在浏览器中使用 "inspect elemnt" 工具来调试这样奇怪的事情。

CONGRATULATIONS 在滑动时剪掉的原因是因为 CSS 中给定的 .congratulations 的宽度。
滑动的前半部分将等于设置的宽度。减少会使第一部分变小,增加会使它变大。
保留 width:100% 是您问题的解决方案。

这很疯狂,slideDown 仅向下滑动您在宽度中指定的部分,300px。 slideDown 完成后显示其余部分。

从祝贺中删除宽度 CSS class.