时间戳

首页 > 解决方案 > jQuery延迟功能的问题

jquery - jQuery延迟功能的问题

问题描述

我正在处理我页面的客户评论部分，其中有一个显示连续名称的 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");

标签： jqueryhtml

解决方案

来自文档：

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

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

对于您的代码：

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

推荐阅读