<div class="fade1">text block 1</div> <div class="fade2">text block 2</div> <div class="fade3">text block"> <div class="fade1">text block 1</div> <div class="fade2">text block 2</div> <div class="fade3">text block"> <div class="fade1">text block 1</div> <div class="fade2">text block 2</div> <div class="fade3">text block" />

jQuery: verander de tekstkleur met tussenpozen

Ik hoopte dat iemand me kon helpen met een jQuery-vraag. Ik heb een site waar ik tekstblokken wil laten kleuren veranderen binnen gedefinieerde tijdsintervallen wanneer de pagina wordt geladen. Als voorbeeld in de volgende code;

<div id="fade">


<div class="fade1">text block 1</div>
<div class="fade2">text block 2</div>
<div class="fade3">text block 3</div>

</div>

Ik zou .fade1 willen veranderen van kleur: # 000, font-weight: normaal; kleuren: # F00, lettertype-gewicht: vijf seconden vetgedrukt en dan weer normaal; gevolgd door .fade2 en vervolgens .fade3 enz. Ik wil dat deze effecten optreden bij het laden van de pagina en niet worden geactiveerd door muisklik of zweven.

Ik ben redelijk nieuw in dit type programmeren en heb geprobeerd om met de methoden jQuery.Color() en .anim() te spelen, maar ik kan niet het gewenste effect bereiken. Alle hulp wordt zeer op prijs gesteld - dank u.

** Dit is de code die ik heb gebruikt sinds ik dit bericht schreef:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

<div id="fade1">Text Block 1</div>
<div id="fade2">Text Block 2</div>
<div id="fade3">Text Block 3</div>


<script type="text/javascript">
var index = 0;
setInterval(highlightText, 3000);

function highlightText() {
      index = (index % 3) + 1;
      $('#fade' + index).css('color', '#e7008a').css('font-size', '110%');
      setTimeout(function() {
             $('#fade' + index).css('color', '#000').css('font-size', '100%');
      }, 2900);
}
</script>
1
toegevoegd bewerkt
Bekeken: 31
de bron
Ik zou waarschijnlijk gewoon een normale JavaScript-code gebruiken.
toegevoegd de auteur Dave Newton, de bron
Waar heb je specifiek problemen mee? Een volledig voorbeeld van javascript/css/html zou ons helpen om u sneller een beter antwoord te geven.
toegevoegd de auteur hafichuk, de bron
Bedankt voor de snelle antwoorden. Ik zal de methode setTimeout proberen. Omdat ik geen van mijn eerdere pogingen om de gewenste resultaten te produceren kon krijgen, heb ik ze niet bewaard, dus ik heb geen relevante monsters om te produceren.
toegevoegd de auteur Laura690, de bron

1 antwoord

Gebruik de ready-functie van uw document, hier vindt u meer informatie over dat .

Gebruik de functie setTimeout in de ready-functie. Je kunt hier meer over lezen hier .

0
toegevoegd
de bron
Ik heb een code toegevoegd aan mijn oorspronkelijke bericht met de functie setTimeout. Het lijkt te werken, maar ik heb gemerkt dat er soms iets misgaat en dat een van de tekstblokken niet meer normaal wordt voordat de volgende verandert. Kan iemand op welke manier dan ook licht verlie- zen?
toegevoegd de auteur Laura690, de bron