jQuery fadeIn效果

时间:2009-02-11 19:30:24

标签: jquery

我不确定为什么下面的代码没有像我期望的那样表现,但是因为我是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;
    });
});

2 个答案:

答案 0 :(得分:9)

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

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

答案 1 :(得分:5)

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

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

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

改变这个:

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

对此:

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