注意1,只有hover事件后才能紧跟着第二个回调函数(mouseleave),尽量还是不使用mouseover事件了

注意2,.stop(false,true); 结束动画,在动画队列中删除自己,并且直接按照原计划的动画效果的完成结果体现结束。

    $(".header-list li").hover(function(e){
slideDowning = true;
var selector = $(this).children('ul');
if(!selector.is(":animated")) {
selector.slideDown(100);
} else {
selector.stop(false,true);
}
},function(){
slideUping = true;
var selector = $(this).children('ul');
if(!selector.is(":animated")) {
selector.slideUp(100);
} else {
selector.stop(false,true);
}
})

jquery 温故而知新 animate动画的一些坑的更多相关文章

  1. jQuery中animate动画第二次点击事件没反应

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  2. jquery的animate({})动画整理

    在网页制作的过程中少不了用到各种动画,形式多种多样,flash,css,js,canvas,等等都能实现,对于其优劣和效果只能说各有千秋. 什么是动画效果,其实网页中的渐变效果就是一种很基础的动画,动 ...

  3. 自定义jQuery的animate动画

    //擦除效果 jQuery.extend(jQuery.easing, { easeOutBack : function(x, t, b, c, d, s) { s = s || 1.3; retur ...

  4. 用jquery的animate动画函数做的网页效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. jquery 停止animate动画,并且回复最初状态

    // 热门推荐悬浮效果 $("#recom_con li img").mouseenter(function(){ $(this).stop(true, true); $w = p ...

  6. jquery的animate动画

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. js实现jquery函数animate动画效果

    <script> function animate(obj, json, interval, sp, fn) { clearInterval(obj.timer); function ge ...

  8. Jquery如何使用动画效果改变背景色

    Jquery如何使用动画效果改变背景色 一.问题引入 jquery的animate动画虽然强大,但是无法使用其进行背景色(background-color)的动画效果变化,因为animate动画效果只 ...

  9. jquery animate 动画效果使用解析

    animate的意思是:使有生气:驱动:使栩栩如生地动作:赋予…以生命作为形容词:有生命的:活的:有生气的:生气勃勃的 先看动画效果:http://keleyi.com/keleyi/phtml/jq ...

随机推荐

  1. ASP.Net MVC开发基础学习笔记(3):Razor视图引擎、控制器与路由机制学习

    一.天降神器“剃须刀” — Razor视图引擎 1.1 千呼万唤始出来的MVC3.0 在MVC3.0版本的时候,微软终于引入了第二种模板引擎:Razor.在这之前,我们一直在使用WebForm时代沿留 ...

  2. HTML5实践 -- 使用CSS3 Media Queries实现响应式设计

    CSS3 Media用法介绍:http://www.w3cplus.com/content/css3-media-queries 转载请注明原创地址:http://www.cnblogs.com/so ...

  3. prefixfree.js_无前缀脚本

    prefixfree.js是JavaScript工具库,怎么用呢... 回答就是:哼!省去CSS3中的前缀“-moz”.“-webkit”.“-o”.“-ms” 省的在写一大堆前缀来适应旧版本浏览器或 ...

  4. hdu1754 线段树

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少.这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求,写 ...

  5. JQuery学习之操作DOM

    1.DOM,就是Document Object Model(文档对象模型) 2.获得内容的方法: **text():设置或返回所选元素的文本内容 $("#btn1").click( ...

  6. CSS3-样式继承,层叠管理,文本格式化

  7. Scau 10327 Biggest Square

    时间限制:1000MS  内存限制:65535K提交次数:0 通过次数:0 题型: 编程题   语言: G++;GCC Description You are given a M*M cloth wi ...

  8. js动画实现透明度动画

    在本次实例中,由于一般主流的浏览器对于透明度opacity最大值为1,但是在IE6最大值是100,此次例子是按主流浏览器的透明度来算的,所以定义的是小数,也可以定义为整数为单位,在运算的时候遇到主流的 ...

  9. POJ1904 King's Quest(完备匹配可行边:强连通分量)

    题目大概就是说给一张二分图以及它的一个完备匹配,现在问X部的各个点可以与Y部那些些点匹配,使得X部其余点都能找到完备匹配. 枚举然后匹配,当然不行,会超时. 这题的解法是,在二分图基础上建一个有向图: ...

  10. Docker安装RStudio

    在我前一篇文章中已讲述了如何在Windows中安装和配置Docker,本文则讲述如何在docker中安装rstudio! 1.Docker的使用 1.1查看指定machine的IP 打开Docker ...