Question

好的记得我想要一个IMAGE如何进出一个字？我不知道我在想什么，但我错了。我想要TEXT进出。

现在问题是什么？一切都是我想要的方式，除了一件事......是否有可能以过渡期间FADES的方式更新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>上无法执行此操作，您应该使用<div>将两个z-index元素一个放在另一个上面，一个包含<b>Dan is the name!</b>另一个包含<b>Apples are good!</b>，然后淡出一个，同时淡化下一个。

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

在DIV中淡化文本

2 个答案: