Question

我正在页面的客户评论部分中工作，该部分的div连续显示名称，并在几秒钟后将箭头移动到每个名称。但是，当我输入jQuery等待几秒钟以便客户端可以阅读第一个推荐词时，尽管我放入了代码来延迟它，但它会自动跳转像素数。这是怎么回事？

HTML：

<div class="cust-name div-box" style="padding: 0;">
   <div class="d-flex flex-row justify-content-around">
       <p>Zach</p>
       <p>Zach</p>
       <p>Zach</p>
       <p>Zach</p>
   </div>
   <div class="arrow-up"></div>
</div>

jQuery：

var $upArrow = $('.arrow-up');

// $(document).ready(function() {
//     $upArrow.delay(5000).css("left", "50px");
// });

$upArrow.hide();
$upArrow.show(2000).css("left", "25px");
$upArrow.delay(2000);
$upArrow.css("left", "50px");

Answer 1

来自docs：

它可以与标准效果队列或自定义队列一起使用。只有队列中的后续事件才被延迟；例如，这将不要延迟不要的.show（）或.hide（）的无参数形式使用效果队列。

.css()不使用效果队列，因此，更好的方法是使用setTimeout();

输入您的代码

$upArrow.hide().show(2000).css("left", "25px");
setTimeout(function() { $upArrow.css("left", "50px"); }, 2000);

Answer 2

我也有jquery的delay方法的问题。相反，您可以尝试使用setTimeout();。

尝试一下：

$upArrow.hide();

$upArrow.show(2000).css("left", "25px");

var alterCss = function() {
 $upArrow.css('left', '50px');
};

setTimeout(alterCss, 2000);

我不确定这是否对您有用，但这将是我首先尝试的方法，因为setTimeout应该提供相同的效果。

jQuery延迟功能的问题

2 个答案: