ansaurus

Question

fade text inside DIV

Answer 1

A:

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.

Anriëtte Combrink 2010-09-08 22:02:25

Answer 2

+2 A:

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.

Josh Stuart 2010-09-08 22:12:37

BRILLIANT! Only nitpick I have is that the text re-fades when I press keys like CTRL , SHIFT, ALT, etc. I just want it to NOT fade when those kind of keys are pressed but I can live. THANKS!!

Dan 2010-09-08 22:19:18

The reason it does that is because you are checking the case each time a key is released. So if you have entered "dan" and then hit "esc", "shift", "alt" etc if will re-check. You could tackle this in a bunch of ways. eg. exclude those characters http://api.jquery.com/keyup/ - which is probably the best way. You could also check if you have already set that case. I'll revise my answer if you want to handle this?

Josh Stuart 2010-09-09 03:35:31

ansaurus

tags:

views:

answers:

fade text inside DIV

related questions