注意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. MOB 短信验证

    工具/原料   Android Studio mob SDK中的jar 和.so文件 方法/步骤   1 把3个jar 放入libs   并添加依赖 在项目的build.gradle里面   在你的项 ...

  2. 通过jquery.transit.min.js插件,实现图片的移动

    首先给出插件:jquery.transit.min.js (function(t,e){if(typeof define==="function"&&define. ...

  3. 使用JdbcTemplate报 Incorrect column count: expected 1, actual 5错误解决

    Incorrect column count: expected 1, actual 5 在使用jdbc的querForObject queryForList的时候,出现Incorrect colum ...

  4. ASP.Net MVC开发基础学习笔记(2):HtmlHelper与扩展方法

    一.一个功能强大的页面开发辅助类—HtmlHelper初步了解 1.1 有失必有得 在ASP.Net MVC中微软并没有提供类似服务器端控件那种开发方式,毕竟微软的MVC就是传统的请求处理响应的回归. ...

  5. hdu 2553 N皇后问题

    回溯. 一个主对角线,副对角线的技巧 //vis[0][i]表示第i列有没有皇后 vis[1][cur+i]表示副对角线 vis[2][cur-i+n]表示主对角线 #include <cstd ...

  6. js总结-面向对象编程,DOM,BOM

  7. spring-boot项目在外部tomcat环境下部署

    http://m.blog.csdn.net/article/details?id=51009423

  8. [转]走向视网膜(Retina)的Web时代

    转载出处:http://www.w3cplus.com/css/towards-retina-web.html 维基百科将Retina译为“视网膜”."Retina"一词,原意是“ ...

  9. spark 部署问题

    spark的web UI 端口设置:spark-env.sh 中设置SPARK_MASTER_WEBUI_PORT 为自己想设置的端口号. 其他worker 的web UI 端口默认:8081 mas ...

  10. URAL1018 Binary Apple Tree(树形DP)

    题目大概说一棵n结点二叉苹果树,n-1个分支,每个分支各有苹果,1是根,要删掉若干个分支,保留q个分支,问最多能保留几个苹果. 挺简单的树形DP,因为是二叉树,都不需要树上背包什么的. dp[u][k ...