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.
我有一个简单的 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.