2016-08-28 1 views
-2

Je voulais montrer 2 textes différents dans un même endroit sur mon site comme un téléscripteur. Les effets que je veux utiliser sont fadeIn et fadeOut. Les textes doivent arriver à la zone spécifiée en utilisant l'effet FadeIn, rester là pendant 3 secondes, puis sortir en utilisant fadeOut. Alors le prochain texte viendra et cette opération doit être faite à l'infinitif. Comment puis-je le faire dans jQuery? J'ai trouvé this article qui est un peu similaire à ce que je veux, mais ça ne couvre pas tous mes besoins.Comment faire pour fondre un texte différent à l'infinitif dans jQuery?

titulaire du texte:

<div id="holder"></div> 
+1

Qu'avez-vous essayé jusqu'ici? S'il vous plaît montrez l'effort et présentez un problème que vous faites face et nous serons heureux d'aider – Li357

+0

J'ai fait mes efforts et parce que je ne pourrais pas trouver le moyen de faire cela, j'ai posé cette question ici. Je pense qu'il est préférable de poser cette question avant la question downvote ... –

+0

Montrez ce que vous avez essayé s'il vous plaît. – Li357

Répondre

1

$('.bxslider').bxSlider({ 
 
    mode: 'fade', 
 
    auto: true, 
 
    pause: 3000, 
 
    controls: false, 
 
    pager: false 
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.css" rel="stylesheet"/> 
 
<style> 
 
    .bx-wrapper { 
 
    -moz-box-shadow:none; 
 
    -webkit-box-shadow:none; 
 
    box-shadow:none; 
 
    border: none; 
 
    background: transparent; 
 
} 
 
</style> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js"></script> 
 

 

 

 
<ul class="bxslider" id="holder"> 
 
    <li>some text</li> 
 
    <li>lorem ipsum</li> 
 
    <li>dolor sit</li> 
 
    <li>smet consecuteru</li> 
 
</ul>

Vous pouvez utiliser bxslider comme ça

+0

Belle réponse et plugin ... Merci –

1

est ce wha vous attend .....

<html> 
 
<head></head> 
 
<title></title> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<style type="text/css"> 
 

 
.textone{ 
 
    position: absolute; 
 
} 
 
.texttwo{ 
 
    position: absolute; 
 
    display: none; 
 
} 
 

 
</style> 
 

 
<body> 
 
<div class="textone"></div> 
 
<div class="texttwo"></div> 
 

 
</body> 
 

 
<script type="text/javascript"> 
 

 
$(document).ready(function(){ 
 
    fadetheText(); 
 
    setInterval(fadetheText,500); 
 
}); 
 

 
function fadetheText() 
 
{ 
 
    $(".textone").text("news sticker"); 
 
    $(".texttwo").text("ANOTHER TEXT") 
 
    $(".textone").fadeOut(500).delay(500).fadeIn(500); 
 
    $(".texttwo").fadeIn(500).delay(500).fadeOut(500); 
 
    } 
 

 
</script> 
 

 
</html>

changer le temps que votre besoin ---> temps montre en ms. J'espère que cela vous aidera.

+0

Mais cela montre juste un texte. –

+0

voulez-vous deux textes? , au même endroit. –

+0

Oui. Je l'ai mentionné dans ma question. –