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淡入淡出内的文字

回答

相关问题