jQuery 的 slideUp 动画 ,如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行,该如何处理呢?
jQuery 的 slideUp 动画 ,如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行,该如何处理呢?
jQuery 中 slideUp 、slideDown、animate 等动画运用时,如果目标元素是被外部事件驱动,当鼠标快速地连续触发外部元素事件,动画会滞后的反复执行,其表现不雅。
则解决办法:
- 1、在触发元素上的事件设置为延迟处理,即可避免滞后反复执行的问题(使用 setTimeout)
- 2、在触发元素的事件时预先停止所有的动画,再执行相应的动画事件(使用 stop)
jquery stop:
// 语法结构
$("#div").stop();// 停止当前动画,继续下一个动画
$("#div").stop(true);// 清除元素的所有动画
$("#div").stop(false, true);// 让当前动画直接到达末状态 ,继续下一个动画
$("#div").stop(true, true);// 清除元素的所有动画,让当前动画直接到达末状态
一般推荐使用第二种方法
$("#div").stop().animate({width:"100px"},100);
更多面试题
如果你想了解更多的前端面试题,请点击下面进行选择,这里基本包涵了市场上的所有前端方面的面试题,让你面试更加顺利。
- HTML 面试题
- CSS 面试题
- JavaScript 面试题
- jQuery 面试题
- Vue.js 面试题
- React 面试题
- 算法 面试题
- AJAX/HTTP 面试题
- Babel 面试题
- BootStrap 面试题
- Electron 面试题
- Gulp 面试题
- Node.js 面试题
- 前端经验相关 面试题
- 前端综合 面试题
- Webpack 面试题
- 微信小程序 面试题
这些题库还在更新中,如果你有不错的面试题库欢迎分享给我,我整理后放上来;人人为我,我为人人,互帮互助,共同提高,祝大家都拿到心仪的Offer!