如何在 jQuery 中将不同的文本淡化为不定式？

Question

我想在我网站的同一位置显示 2 个不同的文本，例如新闻行情。我想使用的效果是 fadeIn 和 fadeOut。文本必须使用淡入效果到达指定区域，停留 3 秒，然后使用淡出效果消失。然后下一个文本会来，这个操作必须用不定式完成。我怎样才能在 jQuery 中做到这一点？我发现 this article 和我想要的有点相似，但它并不能满足我的所有需求。

文本持有者：

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

Answer 1

这是你期待的吗.....

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

根据需要更改时间 --- > 时间显示在 ms 中。希望对你有所帮助。

Answer 2

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

你可以像这样使用 bxslider

如何在 jQuery 中将不同的文本淡化为不定式？

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

jquery

text

fade

infinite

ticker