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