Search code examples
jquerytextfadeinfiniteticker

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

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

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