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