fade text inside DIV
Question
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-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>
2 answers
solution1
2 ACCPTED 2010-09-08 22:12:37
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.
solution2
0 2010-09-08 22:02:25
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.