Steffen187: Javascript: div-container zeitweise anzeigen

Beitrag lesen

Hallo Community-Mitlgieder,
ich versuche mich gerade daran, mit JavaScript mehrere div-Container ein- und ausblenden zu lassen.
Ich habe z.B. 3 Container mit allem möglichen Inhalt. Diese sollen jetzt hintereinander angezeigt und wieder ausgeblendet werden.
Folgendes Script habe ich schon gefunden:
Code:

   <script type="text/javascript">  
/* *****  
 * User defined fade objects and messages  
 *  
 * These messages are used in fades triggered by mouseovers and  
 * mouseouts on table cells.  They are the simplest type of fade and  
 * require no extra Javascript code.  
 */  
var fader = new Array();  
  
fader[0] = new fadeObject('fade0', 'dddddd', '000000', 20, 20);  
fader[0].msg[0] = "This is an optional default message; the fade object on the right side has no default.  Mouseover each topic to make quotes fade in and out.";  
fader[0].msg[1] = "Nowhere can a man find a quieter or more untroubled retreat than in his own soul.<br />- Marcus Aurelius";  
fader[0].msg[2] = "Feeding the starving poor only increases their number.<br />- Ben Bova";  
fader[0].msg[3] = "The limits of tyrants are prescribed by the endurance of those whom they oppose.<br />- Frederick Douglass";  
fader[0].msg[4] = "The foolish man seeks happiness in the distance, the wise grows it under his feet.<br />- James Oppenheim";  
  
fader[1] = new fadeObject('fade1', 'bbbbbb', '000000', 20, 20);  
fader[1].msg[1] = "Success is relative. It is what we can make of the mess we have made of things.<br />- T.S. Eliot";  
fader[1].msg[2] = "We have two ears and one mouth so we may listen more and talk the less.<br />- Epictetus";  
fader[1].msg[3] = "It is better to be violent, if there is violence in our hearts, than to put on the cloak of nonviolence to cover impotence.<br />- Mahatma Gandhi";  
fader[1].msg[4] = "Don't part with your illusions. When they are gone you may still exist, but you have ceased to live.<br />- Mark Twain";  
  
  
  
/* *****  
 * The code below describes how to make a throbbing or automatic fade  
 * sequence of messages.  It is important to note that this function is  
 * NOT part of the Buffered Text-Fade Effect, but merely an example of  
 * how it can be used.  In this example, the throb() function controls  
 * the commands which are sent to the fade engine; it is called  
 * repeatedly at set time intervals rather than using mouseover events  
 * as triggers.  
 *  
 * Notes:  
 * - A global array "hash" is used to keep track of where each  
 *   animation is currently in the sequence.  
 * - The list of messages defined in the fader *must* start at one (1)  
 *   and count upwards without skipping any integers.  
 * - The third line of the throb() function controls how fast  
 *   commands get sent to the fade engine.  It waits only 100 milli-  
 *   seconds when fading out, but 5000 milliseconds (5 seconds) when  
 *   fading in; this means the message will remain visible for about 5  
 *   seconds before fading out again.  
 *  
 * Other types of fade animation are possible simply by designing  
 * different ways to control the fade-ins and fade-outs!  
 */  
var hash = new Array();  
function throb(item) {  
  
  // If the hash array does not have an entry for this item, initialise it at 2  
  if (!hash[item]) hash[item] = 2;  
  
  // Send a fade command, using the hash array to tell us what parameters we should use  
  fader[item].fade(Math.floor(hash[item] / 2), !(hash[item] % 2));  
  
  // Call this function again for this same item after a certain amount of time  
  setTimeout(function() { throb(item); }, (hash[item] % 2) ? 100 : 5000);  
  
  // If we have exceeded the number of messages in this fader, start over again at 2  
  if (++hash[item] > fader[item].msg.length * 2 - 1) hash[item] = 2;  
}  
  
fader[2] = new fadeObject('fade2', 'bbbbbb', '000000', 30, 30);  
fader[2].msg[1] = "<table border='1'><tr><td>Testzeile</td></tr></table>";  
fader[2].msg[2] = "By designing your own looping functions...";  
fader[2].msg[3] = "You can co-ordinate many separate fade effects";  
fader[2].msg[4] = "Including a simple list of messages like this one";  
fader[2].msg[5] = "View the source to find out how!";  
  
// Start this fader  
setTimeout(function() { throb(2); }, 1000);  
  </script>

<div id="fade2"></div>

In dem untere Teil kann ich den zu wechselnden Text eingeben:
Code:

fader[2] = new fadeObject('fade2', 'bbbbbb', '000000', 30, 30);  
fader[2].msg[1] = "<table border='1'><tr><td>Testzeile</td></tr></table>";  
fader[2].msg[2] = "By designing your own looping functions...";  
fader[2].msg[3] = "You can co-ordinate many separate fade effects";  
fader[2].msg[4] = "Including a simple list of messages like this one";  
fader[2].msg[5] = "View the source to find out how!";

So wie hier funktioniert es auch! Ich habe aber Code, der über mehrere Zeilen hinweg geht und sobald ich einen Zeilenumbruch hereinbringe funktioniert das Script nicht mehr.
Z.B. so:

fader[2] = new fadeObject('fade2', 'bbbbbb', '000000', 30, 30);  
fader[2].msg[1] = "<table border='1'>  
<tr><td>Testzeile</td></tr>  
</table>";  
fader[2].msg[2] = "By designing your own looping functions...";  
fader[2].msg[3] = "You can co-ordinate many separate fade effects";  
fader[2].msg[4] = "Including a simple list of messages like this one";  
fader[2].msg[5] = "View the source to find out how!";

Da mein Code durch PHP ausgegeben wird, ist es nicht möglich, diesen in eine Zeile zu bringen.

Was ich mir gedacht habe:
Ich habe mehrere div-Container in meinem HTML-Dokument, in denen mein Code enthalten ist. Jetzt sollen diese nacheinander ein- und wieder ausgeblendet werden. Das sollte dann in einer Dauerschleifen erfolgen.

Mit JavaScript habe ich leider noch sehr wenig Erfahrung!

Vorweg schon vielen Dank!

Grüße Steffen187