Question

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

问题在于，在第一个字符串中，只有单词的前半部分向下滑动但后半部分被延迟一瞬间。

有人可以告诉我原因吗？

这是我的代码：

＆＃13;

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

＆＃13;

Answer 1

这是因为 h1 元素包含你的字符串＆＃34;祝贺！＆＃34;小于它的渲染文本和jQuery显然首先在 h1 元素上应用动画，它只占用字符串的一小部分。

删除 .congratulations 类的宽度属性，或使其宽于文本。

我建议你使用＆＃34;检查elemnt＆＃34;浏览器中的工具可以调试这样的奇怪事情。

Inspect element on h1 element

Answer 2

由于CSS中.congratulations的宽度，因此在滑动时切断的恭喜原因。滑动的前半部分将等于设置的宽度。减少会使第一部分变小，增加会使第一部分变大保持width:100%是您问题的解决方案。

Answer 3

问题来自css类.congratulations 增加到宽度：500px //这将解决半字幻灯片的问题

Answer 4

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

从祝贺CSS类中删除宽度。

JQuery SlideDown（）延迟了一个单词的后半部分

4 个答案: