jQuery 每个属性的延迟

发布于 2025-01-07 03:07:18 字数 1310 浏览 0 评论 0原文

我已经在这个问题上挣扎了一段时间,并决定放弃 setTimeout 方法,因为我刚刚读到创建太多计时器是不好的。下面是为一组对象设置动画的函数 - 在悬停时调用。目前的设置是,所有动画设置都从用户传入并应用于正确的对象,然后每个对象都根据每个属性进行动画处理 - 允许控制每个属性的速度输入/输出和缓动。

我现在唯一要做的就是延误。我无法使用 .delay,因为它没有排队,而且我无法使用 setTimeout (至少在我采取的方法中)。有什么想法吗?

function animate_in(e){ 
$(this).find('.captionator_background').each(function(index){ 
// LOOP THROUGH OBJECTS
current_obj = $(this); current_obj.stop().clearQueue();

// 1. LEFT ANIMATION
current_obj.animate({'left':ends_x_set[index]},{duration:parseInt(bg_x_speed_in_set[index], 10), queue:false, specialEasing: {'left':bg_x_ease_in_set[index]}});

// 2. TOP ANIMATION
current_obj.animate({'top':ends_y_set[index]},{duration:parseInt(bg_y_speed_in_set[index], 10), queue:false, specialEasing: {'top': bg_y_ease_in_set[index]}});

// 3. OPACITY ANIMATION
current_obj.animate({'opacity':parseInt(end_opacity_set[index], 10)},{duration:parseInt(opacity_speed_in_set[index], 10), queue:false, specialEasing: {'opacity':opacity_ease_in_set[index]}});

// 4. BACKGROUND COLOR ANIMATION
current_obj.animate({'backgroundColor':bg_color_in_set[index]},{duration:parseInt(bg_color_speed_in_set[index], 10), queue:false, specialEasing: {'backgroundColor':bg_color_ease_in_set[index]}});

}); // END EACH LOOP
}; // END ANIMATE IN FUNCTION

谢谢!

I've been struggling with this issue for awhile and have decided to ditch the setTimeout approach since I just read creating too many timers is bad. Below is the function to animate a group of objects - which is called on hover. It's currently setup so that all animation settings are passed in from the user and apply to the correct object, then each object is animated on a per-property basis - allowing for control of speed in/out and easing for each property.

The only thing I'm working on now is the delays. I can't use .delay since it isn't queued and I can't use setTimeout (at least in the approach I've taken). Any ideas?

function animate_in(e){ 
$(this).find('.captionator_background').each(function(index){ 
// LOOP THROUGH OBJECTS
current_obj = $(this); current_obj.stop().clearQueue();

// 1. LEFT ANIMATION
current_obj.animate({'left':ends_x_set[index]},{duration:parseInt(bg_x_speed_in_set[index], 10), queue:false, specialEasing: {'left':bg_x_ease_in_set[index]}});

// 2. TOP ANIMATION
current_obj.animate({'top':ends_y_set[index]},{duration:parseInt(bg_y_speed_in_set[index], 10), queue:false, specialEasing: {'top': bg_y_ease_in_set[index]}});

// 3. OPACITY ANIMATION
current_obj.animate({'opacity':parseInt(end_opacity_set[index], 10)},{duration:parseInt(opacity_speed_in_set[index], 10), queue:false, specialEasing: {'opacity':opacity_ease_in_set[index]}});

// 4. BACKGROUND COLOR ANIMATION
current_obj.animate({'backgroundColor':bg_color_in_set[index]},{duration:parseInt(bg_color_speed_in_set[index], 10), queue:false, specialEasing: {'backgroundColor':bg_color_ease_in_set[index]}});

}); // END EACH LOOP
}; // END ANIMATE IN FUNCTION

Thanks!

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文