Javascript-从一项过渡到另一项，会短暂弹出

Question

我的网站上有一个推荐区，从一个推荐区到另一个推荐区。 我遇到一个问题，即在下一个项目消失之前，它的消失速度会太慢，导致两者都出现一个较大的div，从而使其看起来很难看。

我希望它从一种推荐逐渐消失到另一种，而又不会两者同时闪烁。

您可以在此处查看示例： http : //ledragonvert.com/index_test.php

这是我的Javascript代码：

function rotate_p() {
if (p_current == p_count) {
p_current = 1;
} else {
p_current++;
}
var $container = $('#container');
$container.find('p').fadeOut();
$container.find('p:nth-child(' + p_current + ')').fadeIn();
}

var p_count;
var p_current = 0;
var p_interval;
$(document).ready(function () {
rotate_p();
p_count = $('#container').find('p').length;
p_interval = setInterval(function () {rotate_p();}, 7000);
});

非常感谢您抽出宝贵的时间来帮助我。

Answer 1

该解决方案基于CSS。 因为“ p”元素的位置是静态的，并且您同时调用了fadeOut和fadeIn，所以存在重叠，因为两个 p元素不可避免地一起显示。 为了使它们一个接一个，您需要在p元素上使用绝对定位，如下所示：

 #container {
 position:relative;
  }
 #container>p {
    position:absolute;
   //use any values you wish, to set the testimonial relative to #container:
   top:10px; 
   left:50px; 
   }