淡入DIV中的文字

Question

好的，记住我如何让IMAGE一词进出？ 我不知道我在想什么，但我错了。 我希望TEXT出入。

现在有什么问题？ 除了一件事情，一切都是我想要的方式……是否有可能以一种在过渡过程中逐渐消失的方式来更新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>

Answer 1

这样的事情如何避免交叉淡入淡出：

<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的建议实现交叉淡入淡出。 这很棘手，但可以（理论上）实现。 这很简单，或多或少地达到了预期的效果。

Answer 2

不，不可能仅在一个<div>上执行此操作，您应该使用z-index将两个<div>元素置于另一个之上，其中一个包含<b>Dan is the name!</b>其他包含<b>Apples are good!</b> ，然后淡出一个，同时使下一个淡入。

希望我能正确理解您的问题。

淡入DIV中的文字

问题描述

2 个解决方案

解决方案1
2 已采纳 2010-09-08 22:12:37

解决方案2
0 2010-09-08 22:02:25

淡入DIV中的文字

问题描述

2 个解决方案

解决方案1 2 已采纳 2010-09-08 22:12:37

解决方案2 0 2010-09-08 22:02:25

解决方案1
2 已采纳 2010-09-08 22:12:37

解决方案2
0 2010-09-08 22:02:25