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

Question

I have a testimonials area on my website that fades from one testimonial to another. I'm having an issue where it will fade out too slowly before the next item fades in causing both to come up making a large div making it look ugly.

I want it to fade from one testimonial to another without jumping and flashing with both.

You can see an example here: http://ledragonvert.com/index_test.php

Here is my Javascript code:

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

Thanks you very much for taking your time out to help me.

Answer 1

the solution is CSS based. since the position of the "p" element is static and you call both fadeOut and fadeIn, there is an overlap, as two p elements are inevitably shown together. To get them one on top of the other you need to use absolute positioning on the p element, like so:

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