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

Javascript - 从一个项目淡出到另一个项目会短暂弹出

1 个答案: