jquery队列添加一个函数

最新推荐文章于 2022-11-27 16:18:25 发布

原创最新推荐文章于 2022-11-27 16:18:25 发布 · 119 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

52 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的动态元素显示与隐藏效果。通过点击事件触发，演示了元素的渐显、位置动画变化、颜色切换及最终的滑动隐藏过程。此示例涵盖了jQuery动画方法的使用技巧，包括show、animate、queue、removeClass和slideUp等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  </style>
  Click here...
  <div></div>

jQuery 代码:

$(document.body).click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},2000);
      $("div").queue(function () {
          $(this).addClass("newcolor");
          $(this).dequeue();
      });
      $("div").animate({left:'-=200'},500);
      $("div").queue(function () {
          $(this).removeClass("newcolor");
          $(this).dequeue();//保证队列继续往下执行，插入一个自定义函数如果函数执行后要继续队列，则执行 jQuery(this).dequeue();
       });
      $("div").slideUp();
});