jQuery fadeIn效果

Question

我不确定为什么下面的代码没有按照我期望的方式运行,但由于我是jQuery的新手,我确信我缺少一些基本的东西.

HTML:

<div id="locale"></div>

<form id="theForm">
What would you like to do?<br /><br />
<input type="text" id="doThis" /><br /><br />
</form>

JS:

$(document).ready(function() {
    $("#theForm").submit(function(){
        var doThis = $("#doThis").val().toLowerCase();
        $("#locale").html(doThis).fadeIn("slow");
        return false;
    });
});

Answer 1

您只需要先隐藏locale div,使其实际淡入(否则将直接显示):

$(document).ready(function() {
    $("#theForm").submit(function(){
        var doThis = $("#doThis").val().toLowerCase();
        $("#locale").hide().html(doThis).fadeIn("slow");
        return false;
    });
});

Answer 2

我假设你在某个地方有一个提交按钮,这不是你的问题.

我在你的代码中看到的是locale div没有淡入.看起来它只是"弹出"存在.问题是div已经可见了.而html调用只是取代了内部的html.如果对象已经可见,fadeIn()将不会执行任何操作.

解决方案:启动隐藏div的页面.

改变这个:

<div id="locale"></div>

对此:

<div id="local" style="display:none"></div>