1

我使用 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>

4

4 回答 4

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>

请参阅最好通过 Javascript 隐藏以进行渐进增强的答案，但理论是相同的。

于 2013-01-10T20:43:21.593 回答
1

因为你没有隐藏它并且它已经显示出来了。

在文档就绪函数中将此行添加到您的脚本中：

$("#div").hide();
于 2013-01-10T20:43:36.697 回答
1

先把它藏起来。我建议使用这样的 JS

$("input").focus(function(){
    $("#div").hide()
    $("#div").fadeIn(500).css("background-color","#B0B0B0");
});

这样，如果用户禁用了 JS，他仍然会看到 div，只是没有淡入效果。

于 2013-01-10T20:44:35.580 回答
0

将项目设置为不显示，然后在页面加载时为该项目创建一个 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);
        },
    });
});

未经测试，但这些方面的东西应该可以工作。

于 2013-01-10T20:51:19.723 回答