我使用jquery制作了一个工具提示。但是第一次(在页面正确加载之后),即使我已经应用了持续时间为500的延迟(我认为是毫秒?),工具提示也会毫无延迟地出现。为什么会这样呢?
<html>
<head>
<script src="file://C:/Users/Admin/Desktop/jquery-1.8.3.min.js"></script>
<script>
$(document).ready(function(){
$("input").focus(function(){
$("#div").fadeIn(500).css("background-color","#B0B0B0");
});
$("input").blur(function(){
$("#div").fadeOut(500).css("background-color","#B0B0B0");
});
$("input").keyup(function(){
$("#div").html($("input").val());
});
});
</script>
</head>
<body>
<div style="width:150px">
<input type="text" style="width:100%;border-radius:4px;border:1px solid #808080;padding:1%;font-family:calibri"/>
<div id="div" style="color:#FFF;font-family:calibri;min-height:20px;border-radius:4px;padding:1%;word-wrap:break-word"></div>
</div>
</body>
答案 0 :(得分:3)
您必须使用display:none
隐藏它才能开始。
style="display:none";
然后用动画将其带入视野。
<div id="div" style="display:none;color:#FFF;font-family:calibri;min-height:20px;border-radius:4px;padding:1%;word-wrap:break-word"></div>
请参阅this answer,最好通过Javascript隐藏渐进式增强,但理论是相同的。
答案 1 :(得分:1)
因为你没有隐藏它并且它已经显示出来了。
在文档就绪函数中将此行添加到脚本中:
$("#div").hide();
答案 2 :(得分:1)
先隐藏它。我建议使用JS这样做
$("input").focus(function(){
$("#div").hide()
$("#div").fadeIn(500).css("background-color","#B0B0B0");
});
这样,如果用户已禁用JS,他仍会看到div,只是没有淡入效果。
答案 3 :(得分:0)
将项目设置为none,然后在页面加载时为项目创建fadeIn(500)。
此外,您应该考虑清理您的jquery。例如:
$(window).on('load',function(){
var $div = $('#div');
$('input').on({
focus: function(){
$div.fadeIn(500).css({backgroundColor:"#B0B0B0"});
},
blur: function(){
$div.fadeOut(500).css({backgroundColor:"#B0B0B0"});
},
keyup: function(){
$div.html($(this).val());
},
load: function(){
$div.fadeIn(500);
},
});
});
未经过测试,但这些方面的内容应该有效。