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

您只需先隐藏语言环境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>

jQuery fadeIn效果

2 个答案: