0

私のウェブサイトには、ある推薦状から別の推薦状へと消えていく推薦状エリアがあります。次のアイテムがフェードインする前にフェードアウトが遅すぎて、両方が表示されて大きな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);
});

お時間を割いていただき、誠にありがとうございます。

4

1 に答える 1

1

ソリューションはCSSベースです。「p」要素の位置は静的であり、fadeOutとfadeInの両方を呼び出すため、2つの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; 
   }
于 2012-11-18T14:49:49.323 に答える