Question

我想在我的网站中的同一位置显示2个不同的文本，如新闻自动收录器。我想要使用的效果是 fadeIn 和 fadeOut 。文本必须使用淡入淡出效果来到指定区域，在那里停留3秒然后使用fadeOut外出。然后将出现下一个文本，此操作必须是不定式的。我怎么能在jQuery中做到这一点？我发现this article与我想要的有点相似，但它并不能满足我的所有需求。

文字持有人：

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

Answer 1

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

＆＃13;

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

＆＃13;

根据需要更改时间---＆gt;时间显示在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中淡化不同的文本不定式？

2 个答案: