jQuery淡入效果

我不确定为什么下面的代码不会像我期望的那样运行，但是因为我是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; 
    }); 
});

来源

2009-02-11 jerome

你期待/接收的行为是什么？你可以提供你的CSS或添加你的风格内联？ – bendewey 2009-02-11 19:32:25

您只需先隐藏区域的div，这样它实际上可以淡入（否则将被直接显示）：

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

来源

2009-02-11 19:40:28 Wookai

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

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

解决方案：以div隐藏起始页面。

更改此：

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

要这样：

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

来源

2009-02-11 19:38:24

或者他可以在他的Javascript中使用.hide（）。 – strager 2009-02-11 19:45:29

jQuery淡入效果

回答

相关问题