DIV淡入淡出內的文字

好記得我想要一個圖像按照單詞出入？我不知道我在想什麼，但我錯了。我想讓TEXT進出。DIV淡入淡出內的文字

現在有什麼問題？除了一件事之外，一切都是我想要的方式......是否有可能以過渡期間淡入淡出的方式更新DIV HTML？也許使用jQuery？

這是我到目前爲止有：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> 

    <title>Untitled 2</title> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 

    <script type="text/javascript"> 
    $(function() { 
    $('#textfield').keyup(function() { 
    switch($(this).val()) { 
     case 'dan': 
     $('#dan').html("<b>Dan is the name!</b>"); 
     break; 
     case 'apple': 
     $('#dan').html("<b>Apples are good!</b>"); 
     break; 
    } 
    }); 
}); 

</script> 

</head> 

<body> 

<input type="text" name="dan" id="textfield" /> 
<div id="dan">Lorem impulse dolor...</div> 
</body> 
</html>

來源

2010-09-08 nn2

如何這樣的事情，而不是交叉淡入淡出：

<script type="text/javascript"> 
$(function() { 
    $('#textfield').keyup(function() { 
    switch($(this).val()) { 
     case 'dan': 
     $('#dan').fadeOut("fast",function() { $(this).html("<b>Dan is the name!</b>").fadeIn("fast"); }); 
     break; 
     case 'apple': 
     $('#dan').fadeOut("fast",function() { $(this).html("<b>Apples are good!</b>").fadeIn("fast"); }); 
     break; 
    } 
    }); 
}); 

</script>

衰舊文本出來，掉期，以新的文本，並消失在

你可以實現通過絕對定位元素淡入淡出。並按照建議使用z-index。這是棘手的，但可以實現（理論上）。這很簡單，或多或少達到預期的效果。

來源

2010-09-08 22:12:37 User123342234

BRILLIANT！我唯一挑剔的是，當我按下CTRL，SHIFT，ALT等鍵時，文本會重新淡入淡出。我只是希望它在按下這些鍵時不會褪色，但我可以活下去。謝謝！！ – nn2 2010-09-08 22:19:18

這樣做的原因是因爲每次發佈密鑰時都要檢查案例。所以如果你輸入了「丹」，然後點擊「esc」，「shift」，「alt」等，如果將重新檢查。你可以用很多方法來解決這個問題。例如。排除這些字符http://api.jquery.com/keyup/ - 這可能是最好的方法。你也可以檢查你是否已經設置了這種情況。如果你想處理這個問題，我會修改我的答案嗎？ – User123342234 2010-09-09 03:35:31

不，這是不可能做到這一點的只有一個<div>，你應該有兩個<div>元素坐在一個在另一個之上，使用z-index，含<b>Dan is the name!</b>一個另一個包含<b>Apples are good!</b>，然後淡入淡出下一個。

希望我正確理解你的問題。

來源

2010-09-08 22:02:25

DIV淡入淡出內的文字

回答

相關問題