开发者

fade text inside DIV

OK rememebr how I wanted an IMAGE to go in and out according to a word? I don't know what I was thinking but I was wrong. I wanted TEXT to go in and out.

Now what's the problem? Everything is the way I want it except for ONE thing... is it possible to be able to update the DIV HTML in a way that it FADES during the transition? Maybe using jQuery?

Here is what I have so far:

<!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-885开发者_开发百科9-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>


How about something like this instead of cross fading:

<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>

Fades the old text out, swaps to the new text and fades in.

You could achieve a cross fade by absolute positioning elements and as suggested using z-index. It is tricky but can be achieved (theoretically). This is simple and more or less achieves the desired effect.


No, it's not possible to do it on one <div> only, you should have two <div> elements sitting one above the other, using z-index, one containing <b>Dan is the name!</b> and the other containing <b>Apples are good!</b> and then fade the one out while fading the next one in.

Hope I understood your question correctly.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜