эффект затухания jQuery

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>

ЯШ:

$(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

Я предполагаю, что у вас есть кнопка отправки, так что это не ваша проблема.

То, что я вижу в вашем коде, это то, что локаль div не исчезает. Похоже, она просто «появляется». Проблема в том, что div уже виден. И вызов html просто заменяет внутренний html. fadeIn () ничего не сделает, если объект уже виден.

Решение: Запустите страницу со скрытым div.

Изменить это:

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

К этому:

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