How to fade different text to each other infinitive in jQuery?

Question

I wanted to show 2 different texts in a same location in my website like a news ticker. The effects I want to use are fadeIn and fadeOut. Texts must come to specified area using fadeIn effect, stay there for 3 seconds and then go out using fadeOut. Then the next text will come and this operation must be done infinitive. How can I do it in jQuery? I found this article that is a bit similar to what I want, but it does not cover all my needs.

Text holder:

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

What have you tried thus far? Please show effort and present a problem you are facing and we'll be glad to help — Andrew Li, Aug 28 '16 at 06:36
I did my efforts and because I could not find the way to do that, I asked this question here. I think it's better to ask this before downvote question ... — Mohammad Saberi, Aug 28 '16 at 06:37

caldera.sac · Answer 1 · 2016-08-28T08:12:39.483

is this wha you expecting .....

<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>

change the time as your need --- > time shows in ms. hope this will help to you.

do you want two texts ? , in the same place. – caldera.sac Aug 28 '16 at 08:07 — caldera.sac, Aug 28 '16 at 08:07
Yes. I've mentioned this in my question. – Mohammad Saberi Aug 28 '16 at 08:10 — Mohammad Saberi, Aug 28 '16 at 08:10

score 1 · Accepted Answer · answered Aug 28 '16 at 11:47

$('.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>

You could use bxslider like this

Nice answer and plugin ... Thank you – Mohammad Saberi Aug 29 '16 at 11:38 — Mohammad Saberi, Aug 29 '16 at 11:38

How to fade different text to each other infinitive in jQuery?

2 Answers2