澳门网络娱乐游戏平台-澳门电子游戏娱乐网址-官方直营

【澳门平台网址】jQuery停止动画——stop()方法的使用

  超级多时候须要结束相称成分正在开展的卡通片,例如,当鼠标选入成分时显得菜单,鼠标离开时遮盖下拉菜单,假设鼠标移入移出过快的话就能够招致动漫效果与鼠标的动作不相似的情景,那时stop(卡塔尔国就派上用项了。

         stop(卡塔尔国方法的语法构造为:

                   stop([clearQueue],[gotoEnd]);

         参数clearQueue和gotoEnd都以可选参数,为Boolean值(true或false)。clearQueue代表是还是不是清空未实行完的卡通队列,gotoEnd代表是不是直接将正在实践的卡通片跳转到末状态。

(1)直接行使使用stop(State of Qatar方法,则会登时甘休当前正在进行的动漫,如若接下去还会有动漫等待继续进行,则以当下场馆早先接下去的动漫。比方上面例子:

    <!-- html部分 -->
   <div id="panel" style="width: 60px;height: 22px;background-color: #eee;border: 1px solid #abcdef;font-size: 12px;">呵呵</div> 

    <!-- 引入jquery库 -->
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

 

    /* js部分 */
    $("#panel").hover(function() {
        $(this).stop().animate({height: "150"}, 200);
    },function() {
        $(this).stop().animate({height: "22"}, 300);
    });

  这时,在光标移入时,触发光标移入动漫(在0.2秒内height变为150),在动漫还未有推行完的时候光标移出,则截至当前动漫(可能height尚未到达150),实践光标移出触发的动漫片(在0.3秒内height变回22)。反之亦然。

只要赶上组合卡通,举个例子:

    $("#panel").hover(function() {
        $(this).stop()
            .animate({height: "150"}, 5000)       //如果在此时触发了光标的移出事件
                                                  //将执行下面的动画
            .animate({borderWidth: "20px"},3000); //而非光标移出事件中的动画
    },function() {
        $(this).stop()
            .animate({width: "300"}, 2000)
            .animate({fontSize: "24px"},3000);
    });

  那时只用一个不带参数的stop(卡塔尔(قطر‎方法就呈现力不能支了。因为stop(卡塔尔国方法只会告风度翩翩段落正在进展的动漫片,借使动漫正施行在第1品级(校订height的级差),则触发光标移出事件后,只会终止当前的卡通,并世袭展开下边包车型大巴.animate({borderWidth: "20px"},3000卡塔尔(قطر‎动漫,而光标移出事件中的动漫要等那些动漫停止后才会继续试行,那明摆着不是预期的结果。这种景况下stop(卡塔尔国方法的首先个参数就发挥功能了。

(2)stop(true卡塔尔,这时前后相继会把当下因素接下去未有实行完的动漫队列清空。所以能够把地点代码改成那样代码,就能够兑现预期的法力。

    $("#panel").hover(function() {
        $(this).stop(true)
            .animate({height: "150"}, 5000)       //如果在此时触发了光标的移出事件
                                                  //直接跳过后面的动画队列
            .animate({borderWidth: "20px"},3000); 
    },function() {
        $(this).stop(true)
            .animate({width: "300"}, 2000)
            .animate({fontSize: "24px"},3000);
    });

(3)第4个参数(gotoEnd)能够用来让正在举办的卡通直接到达甘休时刻的动静,平时用于后二个动漫片须求依靠前三个卡通的末状态的图景,可以透过stop(false,true卡塔尔(قطر‎这种措施来让当前卡通直接到达末状态。

(4)两个结合起来stop(true,true卡塔尔(قطر‎,即截止澳门电子网址,当前动漫并直接达到当前动漫片的末状态,并清空动画队列。

(5)注意,jQuery只能设置正在实践的动漫片的最终状态,而从未提供第一手到达实行动漫队列最后状态的章程。举个例子有大器晚成组动漫:

    $("div.content")
        .animate({width: "300"}, 200)
        .animate({height: "150"}, 300)
        .animate({opacity: "0.2"}, 200);

澳门平台网址,  无论怎么设置stop(卡塔尔国方法,均不可能再变动"width"或然"height"时,将此<div>成分的末状态造成300*150轻重,何况安装发光度为0.2。

 

友善提示:

  jQuery中的动漫有show(State of Qatar、hide(卡塔尔(قطر‎、fadeIn(卡塔尔(قطر‎、fadeOut(卡塔尔、slideDown(卡塔尔、slideUp(卡塔尔、animate(卡塔尔国等等。stop(卡塔尔方法对上述的卡通都适用。

 

参考自《锋利的jQuery第二版》

本文由澳门网络娱乐游戏平台发布于Web前端,转载请注明出处:【澳门平台网址】jQuery停止动画——stop()方法的使用

相关阅读