jQuery fadeIn效果 [英] jQuery fadeIn effect

问题描述

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

I am not sure why the following code is not behaving the way I would expect it to, but as I am new to jQuery I am sure that I'm missing something elementary.

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;
    });
});

推荐答案

您只需先隐藏语言环境div，以便它实际上可以淡入（否则它将直接显示）：

You simply have to first hide the locale div so that it can actually fade in (otherwise it will be displayed directly) :

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

这篇关于jQuery fadeIn效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！