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淡入效果

回答

相關問題