jQuery之.stop()方法的理解

//jQuery基础教程 第四版 p227$(document).ready(function() {
 $(‘div.member‘).on(‘mouseenter mouseleave‘, function(event) {
 var size = event.type == ‘mouseenter‘ ? 85 : 75;
 var padding = event.type == ‘mouseenter‘ ? 0 : 5;
 $(this).find(‘img‘).stop().animate({
 width: size,
 height: size,
 paddingTop: padding,
 paddingLeft: padding
 });
 });
});

一直不太明白stop方法的工作原理。以前的错误理解是在动画之前执行stop方法,那动画不就被停止了,可测试的时候,动画依然执行,一直很困惑。

后来查看jQurey API发现是Stop the currently-running animation on the matched elements

我的理解是mouseenter时,当前还没有动画,就无所谓停止动画了(不执行stop方法),就执行后面的animate({.....})了。而当这个动画还没执行完成时,就立即mouseleave,此时就执行stop,立即停止当前未完成的动画。

时间: 2024-08-02 12:00:14

jQuery之.stop()方法的理解的相关文章

理解jquery的.on()方法

jquery在的.on()方法用来给元素绑定事件处理函数的,我经常用在两个地方: 给未来的元素绑定事件:我总是这样用:$(document).on('click','#div1',function(){}); 给拥有同一个父元素的多个子元素绑定事件. 可以查看以前写的博客:jQuery中对未来的元素绑定事件 先来看一个实例: 在页面A的一个div里动态加载页面B,页面B里的一个div绑定了一个单击事件. 页面A如下: <body> <input type="button&quo

理解一下jQuery.extend()和jQuery.fn.extend()方法

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法.1. jQuery.extend() 方法有一个重载. jQuery.extend(object) ,一个参数的用于扩展jQuery类本身,也就是用来在jQuery类/命名空间上增加新函数,或者叫静态方法,例如jQuery内置的 ajax方法都是用 jQuery.ajax()这样调用的,有点像 "类名.方法名" 静态方法的调用方式.下面我们也来写个jQuery.extend

jQuery - DOM 元素方法

jQuery DOM 元素方法 - get() 方法 实例 获得第一个 p 元素的名称和值: <script type="text/javascript">   $(document).ready(function(){   $("button").click(function(){   x=$("p").get(0);   $("div").text(x.nodeName + ": " + x

jQuery常用工具方法

前面的话 jQuery提供一些与元素无关的工具方法,不必选中元素,就可以直接使用这些方法.如果理解原生javascript的继承原理,那么就能理解工具方法的实质.它是定义在jQuery构造函数上的方法,即jQuery.method(),所以可以直接使用.而那些操作元素的方法,是定义在构造函数的prototype对象上的方法,即jQuery.prototype.method(),所以必须生成实例(即选中元素)后使用.把工具方法理解成像javascript原生函数那样可以直接使用的方法就行了.下面将

jQuery的extend方法

jq中的extend在面试中经常会被问道,今天我总结一个下有关于extend的用法三种进行对比,可能不全,希望大家指点, 用法一: $.extend({})  ,为jQuery类添加方法,可以理解为扩展静态方法 用法二:$.fn.extend({})  插件,对jQuery.prototype进行扩展,提到插件那么就得说一下另一种方法$.fn.method = function(){} 1. $.fn.method = function(){} 可以定义一个方法 2 . $.fn.extend(

为Jquery类和Jquery对象扩展方法

jquery.fn.extend与jquery.extend jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. JavaScript代码 jQuery

对jquery的 attr()和prop()理解

jquery1.6版本后引入了prop()方法,很多时候总是混淆attr()与prop()这俩,下面分析一下这俩的区别 在此之前,先来了解一下html 的attribute和property,因为jquery的attr()和prop()正是来源于这俩东西.先看一段html代码: <span id="testId" class="testClass" selfAttribute="selfValue"></span> 根据

jQuery Easing 使用方法及其图解

原文地址:http://blog.sina.com.cn/s/blog_70a3539f0102v8az.html 从jQuery API 文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [, easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合 duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow", &quo

复习css3的部分属性和jquery的queue方法

利用css3实现一个半月形的西瓜,利用queue实现吃西瓜的动画.练习例子 css3: 1.圆角 border-radius:100%; border-top-left-radius:5px; 2.变形 2D旋转:transform: rotate(25deg);(正角度为顺时针,负角度为逆时针). 3D旋转:transform: rotateX(25deg);-----效果为div的高度变小,90deg时高度为0. 3D旋转:transform: rotateY(25deg);-----效果为