jquery 解决事件监听动画延迟触发的问题

上代码

<div id="small"></div>
<div id="large"></div>
#small{
    width: 100px;
    height: 100px;
    background: red;
    position: absolute;
    top: 100px;
    left: 100px;
}

#large{
    width: 200px;
    height: 200px;
    background: purple;
    position: absolute;
    left: 500px;
    top: 300px;
}
$(function(){
    $("#small").mouseover(function(){
        $("#large").stop().animate({
            width: "1000px"
        });
    });

    $("#small").mouseout(function(){
        $("#large").stop().animate({
            width: "200px"
        });
    });
});

与其考虑怎么让动画执行过程中停下来,不如先让动画停下来再执行一次。

时间: 2024-11-05 11:30:57

jquery 解决事件监听动画延迟触发的问题的相关文章

jQuery中的事件监听小记

一,一个事件监听的简便写法 最近发现一个jQuery中事件监听的简洁写法,感觉方便好多.同时也深感自己基础薄弱,好多东西竟然都模棱两可.因此,记录的同时,也对jQuery事件监听做个小的总结 原文链接:http://blog.csdn.net/luyinchangdejiqing/article/details/52413368 //鼠标拖拽触发动画 $(".item-wrap").on({ mousedown: function(e) { var el = $(this); var

js如何实现事件监听和解决兼容性

一.为什么需要事件监听? 我们可不可以为同一对象的同一事件绑定多个事件处理程序呢? 通过行内绑定和动态绑定是不可以的,但是可以通过事件监听来实现. window.onload = function() { // 动态绑定 document.getElementById('btn').onclick = function() { alert('first'); } // 动态绑定 document.getElementById('btn').onclick = function() { alert

关于v4包的Fragment过渡动画的事件监听无响应问题解决

项目中部分功能模块采用了单Activity+多Fragment模式,当Fragment切换时,需要在过渡动画执行完后做一些操作,通常就是在自己封装的FragmentBase中重写onCreateAnimation方法,创建一个Animation对象,并添加动画的事件监听.而最近升级了v4包后,突然发现添加的动画事件监听无响应了.通过查看源码,发现在v4包中关于Fragment管理类FragmentManagerImpl中,在获取Animation对象后,也添加了对动画的监听事件,也就覆盖了我自己

从jQuery的缓存到事件监听

很久以前,我还在cnblogs里面逛的时候就提出过一个问题(刚找了半天没找到).不知道大家有没有发现,用jQuery选择器"选择"之后的DOM上会添加jQuery*********属性. <DIV id=d1 jQuery1294122065250="1">abc </DIV> 首先jQuery1294122065250中的"1294122065250"其实是一个时间戳.看看jQuery的源代码. var expando 

html学习 - jquery事件监听详解

html学习 - jquery事件监听详解 html学习 - jquery事件监听详解 监听方法 监听方法参数解释 click参数 事件自动执行问题解决 bind方法 live方法 监听方法 在jquery里,监听的方法比较多,用的最多的就是简单的.click() .onchange() .pressdown() 所以这样很简单啊,直接使用就好了,只要符合参数规范就可以了.除了这个还有bind() live() 方法. 而addEventListener()同bind()方法是没有很大功能上的区

transitionend事件 监听 fadeIn fadeOut 两个方法无效(动画结束时无法执行transitionend里面的代码)

//下面的例子证明 fadeIn() fadeOut() 不能使用transitionend事件进行监听. //说白了在fadeIn fadeOut 后面监听动画结束时,transitionend是不会执行的. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <st

jQuery页面滚动监听事件及高级效果插件

jQuery页面滚动监听事件及高级效果插件 1. One Page scroll (只适用于上下焦点图)http://www.thepetedesign.com/demos/onepage_scroll_demo.html 2. Scrolld(更不好用)https://github.com/charliegeiger89/Scrolld.js#readme 3. Animate Scroll(参数太少,不好用)https://github.com/ramswaroop/animatescrol

css3动画的事件监听

1. -webkit-animation动画其实有三个事件: 开始事件 webkitAnimationStart 结束事件 webkitAnimationEnd 重复运动事件 webkitAnimationIteration 2.  css3的过渡属性transition,在动画结束时,也存在结束的事件:webkitTransitionEnd; 注意:transition,也仅仅有这一个事件. demo:点击查看demo (注:以上demo打开后,打开调试器查看) 以上事件是针对webkit内核

前端基本知识(四):JS的异步模式:1、回调函数;2、事件监听;3、观察者模式;4、promise对象

JavaScript语言将任务的执行模式可以分成两种:同步(Synchronous)和异步(Asychronous). “同步模式”就是一个任务完成之后,后边跟着一个任务接着执行:程序的执行顺序和排列顺序是一直的:”异步模式”则完全不同,每一个任务都有一个或者多个回调函数(callback),前一个任务结束的时候,不是执行下一个任务,二十执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务顺序不一致的,异步的. 在浏览器端,耗时时间长的操作都应该异步执行,避免浏览器数去