• jquery之stop()的用法


    jquery之stop()的用法

    目的:为了 了解stop()的用法,举个例子,直观的方式看看。

    实物:一个id="animater"的div包含了一段文字。(以下用animator表示实物)

    动画最终的完整效果: animater向右移动800px(这个完整的过程是动画1),然后,字体逐渐变大(这个完整的过程是动画2),然后,透明度逐渐降低到0(这个完整的过程是动画3),然后透明度逐渐恢复到1(这个完整的过程是动画4),然后字体大小变为16px同时移动到距离左边界200px的位置(这个完整的过程是动画5).

    操作:点击不同id的button,观看效果。

    HTML代码:

    复制代码
           <div id="animater">
                stop()方法测试
            </div>
    
            <div id="button">
                <input type="button" id="button1" value="stop()"/>
                <input type="button" id="button2" value="stop(true)"/>
                <input type="button" id="button3" value="stop(false,true)"/>
                <input type="button" id="button4" value="stop(true,true)"/>
                
            </div>
    复制代码

    CSS代码:

    复制代码
             #animater{
                     150px;
                    background:activeborder;
                    border: 1px solid black;
                    /*为了移动,需设置此属性*/
                    position: relative;
                }
    复制代码

    jquery代码:

    复制代码
                  //            为了看效果,随意写的动画
                    $('#animater').animate({
                        'right':-800
                    }, 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');
    
    
    
            
                    //           点击不同的button执行不同的操作
            
                    $('#button1').click(function(){
                        //默认参数是false,不管写一个false还是两个false还是没写false效果一样
                        $('#animater').stop();
                    });
                    $('#button2').click(function(){
                        //第二个参数默认false
                        $('#animater').stop(true);
                    });
                    $('#button3').click(function(){
                        $('#animater').stop(false,true);
                    });
                    $('#button4').click(function(){
                        $('#animater').stop(true,true);
                    });
    复制代码

    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),这样每次快速的移入移出菜单,就正常了,当移入一个菜单的时候,停止所有加入队列的动画,但是完成当前的动画(跳至当前动画的最终效果位置)
                 /         
                 * @param className 
                 * @param tip 
                 * @param event 
                 */
                var sendMsgTipsContent = function (className, tip, $event) {
                    $event.stopPropagation();
                    $(className).children("span").text(tip);
                    $(className).stop(true, true).fadeIn(500);
                    $(className).stop(true, true).delay(2000).fadeOut(1000);
                    if (!$scope.$$phase) {
                        $scope.$apply();
                    }
                    // sendMsgTip(className,$event);
                }
    
    var newsTips = {
                    error_empty_content: '消息内容不能为空',
                    error_words_limit_content: '短信内容不允许超500字',
                    timed_expiration_content: '定时时间已过期',
                    add_linkman_tips_content: '请添加收信人',
                    send_fail_message_content: '短信发送失败'
                };
    
    <div class="msgTips" style="display: none;">
            <span></span>
        </div>

    项目中遇到的bug也是动画积累,淡入淡出;然后连续点击按钮,div 会有动画积累;点击几次出现几次;

    转自 http://www.cnblogs.com/wenzichiqingwa/archive/2012/11/21/2780996.html
  • 相关阅读:
    linux常用命令
    windows 安装elasticsearch-head插件
    spring boot 使用logback日志系统的详细说明
    mysql 修改密码的几种方式
    html跑马灯效果
    windows 安装elk日志系统
    logstash 启动报找不主类或无法加载 java
    MySQL和Postgresql的区别
    Swift-----泛型Generic
    Swift-----扩展extension
  • 原文地址:https://www.cnblogs.com/sxz2008/p/6672566.html
Copyright © 2020-2023  润新知