JQuery - Загрузите текст с помощью fadeIn, измените текст после 5000 и остановитесь. Случайный выбор текста

Я хотел бы загрузить textString из текстового файла (случайно) через jQuery. Сначала текст должен исчезать, затем стоять в течение 3 секунд, затем снова исчезать, затем textLink должен исчезать в течение 3 секунд. и стоять и останавливаться (без изменений). Оба текста должны отображаться в том же <div>.JQuery - Загрузите текст с помощью fadeIn, измените текст после 5000 и остановитесь. Случайный выбор текста

TextFileExample:

 
TextString 1 
TextLink 1 

TextString2 
TextLink2 

TextString3 
TextLink3 
. 
.

Есть около 20 частей текста (textString и textLink). На каждой веб-странице перезагрузите текст, и ссылка должна быть случайно изменена.

TextFile - это .txt или .xml-файл - все, что проще.

источник

2010-09-23 chris

Использовать обратные вызовы в функциях fadeIn() и fadeOut() –

XML/HTML для этого сценария несколько проще. Например, вы могли бы остаться HTML совместимым, и в пределах вашей строки/ссылке метафоры (вы можете выбрать любой другой макет вам нравится, хотя):

<div> 
    <a href="TextLink 1">TextString 1</a> 
    <a href="TextLink 2">TextString 2</a> 
    <!-- ... --> 
</div>

И в вашей целевой странице:

<div id="textDisplay"></div>

И JavaScript вдоль линий:

$(function() { 
    // random function is from: http://roshanbh.com.np/2008/09/get-random-number-range-two-numbers-javascript.html 
    function randomXToY(minVal,maxVal) { 
    var randVal = minVal+(Math.random()*(maxVal-minVal)); 
    return Math.round(randVal); 
    } 

    // get the HTML and handle it when ready (i.e. everything 
    // happens in the Ajax callback) 
    $.get("texts.html", function(html) { 
    var $found = $(html).find("a"); 

    if ($found.length > 0) { 
     var a = $found[randomXToY(0,$found.length-1)]; 
     var t = $(a).text(); 
     var h = $(a).attr("href"); 

     $("#textDisplay") 
     .hide() 
     .text(t) 
     .fadeIn('fast') 
     .delay(3000) 
     .fadeOut('fast', function() { $(this).text(h); }) 
     .fadeIn('fast'); 
    } 
    }); 
});

Смотреть это работает в this jsFiddle (без вызова Ajax, конечно).

источник

2010-09-23 16:53:33 Tomalak

Благодарим за отзыв ... вы мне помогли!

Heres моя рабочая версия с XML прилив крови к голове:

HTML-КОД:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<title>XML readout and text animation</title> 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript"> 
    //This script does the following 
    //It shows and hides some XML test. The first output ist normal text, the second output is a weblink. 
    //The first text fadesOut after some time and the second text fadesIn and stops. No more fading. 
    //On each refresh there is only one random text selected from the XML file. 


    // Set values for max and min - how many XML id in file linkData.xml 
    var maxVal = 2; 
    var maxMin = 0; 

    //Read the XML file. Get random var from val max-min. Read only one ID from XML file. Then pass values to function animateOutput 
    $.get('linkData.xml', null, function (data, textStatus) { 

      var whatID = Math.round((Math.random()*(maxVal-maxMin))); 

      var ausgabeText = ($(data).find('ethLinks [id='+whatID+'] title').text()); 
      var ausgabeLink = ($(data).find('ethLinks [id='+whatID+'] titleLink').text()); 
      var ausgabeURL = ($(data).find('ethLinks [id='+whatID+'] url').text()); 

      animateOutput(ausgabeText,ausgabeLink,ausgabeURL); 
    }, 'xml'); 

    //Gets values from XML readout and animates text. 
    function animateOutput(ausgabeText,ausgabeLink,ausgabeURL) { 

    $("#textDisplay") 
      .hide() 
      .text(ausgabeText) 
      .fadeIn('fast') 
      .delay(3000) 
      .fadeOut('fast', function() { $(this).html('<a href="'+ ausgabeURL + '"target="_self" title="Sehen Sie die Arbeiten für: ' + ausgabeLink + '">' + ausgabeLink + '</a> und E,T&H.'); }) 
      .fadeIn('fast'); 
    } 

</script> 
</head> 
<body> 
    <div id="textDisplay"></div> 
</body> 
</html>

и код XML файл:

<?xml version="1.0" encoding="iso-8859-1"?> 
<ethLinks> 
    <link id="0"> 
    <title>Am Bodensee sind wir ganz in unserem Element.</title> 
    <titleLink>Badhütte Rorschach</titleLink> 
    <url>http://www.apple.com</url> 
    </link> 

    <link id="1"> 
    <title>Manchmal möchte man in die Luft gehen.</title> 
    <titleLink>Ballonclub Alpenrheintal</titleLink> 
    <url>http://www.orf.at</url> 
    </link> 

    <link id="2"> 
    <title>Auf öde Konferenzäume pfeifen wir.</title> 
    <titleLink>CONDFERENCE ARENA</titleLink> 
    <url>http://www.dell.com</url> 
    </link> 
</ethLinks>

Большую помощь

источник

2010-09-24 08:54:50 chris

Если бы я помог вам, было бы хорошо, если бы вы приняли мой ответ. ;-) Код выглядит хорошо, жестко ограниченный лимит ID меня несколько пугает. Как насчет * подсчета * узлов вместо этого? Кроме того, лучше избегать создания узлов DOM путем конкатенации строк. Вместо этого используйте что-то вроде этого: '$ (' Tomalak

JQuery - Загрузите текст с помощью fadeIn, измените текст после 5000 и остановитесь. Случайный выбор текста

ответ

Смежные вопросы