zoukankan      html  css  js  c++  java
  • jquery之stop()的用法

     

     1 //            为了看效果,随意写的动画
     2                 $('#animater').animate({
     3                     'right':-800
     4                 }, 3000).animate({'font-size':'16px'},'normal').animate({'font-size':'26px'},'normal').animate({'font-size':'36px'},'normal').animate({'font-size':'46px'},'normal').animate({'font-size':'56px'},'normal').animate({'opacity':0},'normal').animate({'opacity':1},'normal').animate({'left':200,'font-size':'16px'},'normal');
     5 
     6 
     7 
     8         
     9                 //           点击不同的button执行不同的操作
    10         
    11                 $('#button1').click(function(){
    12                     //默认参数是false,不管写一个false还是两个false还是没写false效果一样
    13                     $('#animater').stop();
    14                 });
    15                 $('#button2').click(function(){
    16                     //第二个参数默认false
    17                     $('#animater').stop(true);
    18                 });
    19                 $('#button3').click(function(){
    20                     $('#animater').stop(false,true);
    21                 });
    22                 $('#button4').click(function(){
    23                     $('#animater').stop(true,true);
    24                 });

     

     

     

    W3School上是这样的说明的:

    stop(stopAll,goToEnd)

    参数描述
    stopAll 可选。规定是否停止被选元素的所有加入队列的动画。
    goToEnd

    可选。规定是否允许完成当前的动画。

    该参数只能在设置了 stopAll 参数时使用。

    我的理解:

    stopAll 为false时,不停止被选元素所有加入队列的动画,仅停止当前的动画。stopAll为true时,停止所有加入队列的动画(如goToend为true,直接跳到当前动画的最终效果)。

    goToend为false时,不允许直接跳到当前动画的最终效果(应该就是所谓的完成当前的动画吧),goToend为true时,允许直接跳到完成当前动画的最终末尾效果

     

    每次运行页面,animater运动时,点击不同button,看到如下不同的效果(animater处在动画1时点击):

    点击按钮button1(stop()),由于两个参数都是false。所以点击发生时,animater没有跳到当前动画(动画1)的最终效果,而直接进入动画2,然后动画3,4,5.直至完成整个动画。

    点击按钮button1(stop(true)),由于第一个是true,第二个是false,所以animater立刻全部停止了,动画不动了。

    点击按钮button1(stop(false,true)),由于第一个是false,第 二个是true,所以点击发生时,animater身处的当前动画(动画1)停止并且animater直接跳到当前动画(动画1)的最终末尾效果位置,接 着正常执行下面的动画(动画2,3,4,5),直至完成整个动画。

    点击按钮button1(stop(true,true)),由于两个都是true,所以点击发生时,animater跳到当前动画(动画1)的最终末尾效果位置,然后,全部动画停止。

     

    工作中遇到过的实际案例:

    我在项目里做的一个下拉菜单,当鼠标移上去的时候就菜单显示,当鼠标离开的时候菜单隐藏

    如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累",当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。
     
    解决方法:在写动画效果的代码前加入stop(truetrue),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)
     
     
    转载自http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html
    完全是转发,若有版权问题,请联系我。
     
  • 相关阅读:
    蘑菇街2016校园招聘第一个编程题
    杭州天丽笔试题
    2016校园招聘 cvte一面被问到的面试题目
    C#中ArrayList,List,数组的区别
    大白话讲解.NET中挂起线程的Thread.Sleep()方法
    OutLook邮箱获取授权码
    EPIC全速下载游戏加速教程
    远程服务器提示:身份验证错误 要求的函数不受支持解决办法汇总-- Windows远程桌面连接
    华硕主板重装系统以后BIOS设置的启动项就没有了,开机就进BIOS,不进系统
    Windows10访问共享文件夹:此用户无法登录,因为该账户当前已被禁用此用户无法登录,因为该账户当前已被禁用或者直接找不到相应的计算机解决办法
  • 原文地址:https://www.cnblogs.com/Sinhtml/p/3747561.html
Copyright © 2011-2022 走看看