jquery运动

ThreeWords 发布于2019-08-23 11:40 / 417人阅读

摘要：运动做链式运动的时候可以使用回调函数，多写几个运动。然后逐一运动这些调用。默认是，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选参数规定是否立即完成当前动画。清除当前运动停止滑动点击这里，向下滑动面板

在前面封装的move.js框架，在jquery中有同样封装好的功能animate()。使用方法非常类似，下面我们看看animate的使用方法，有了原生的运动方法，然后再使用jquery的运动方法就会变得非常简单。

animate()语法

$(selector).animate({params},speed,callback);

必需的params参数定义形成动画的css属性。
可选的speed参数规定效果的时长。它可以取以下值“slow”，“fast”或毫秒。
可选的callback参数是动画完成后所执行的函数名称。
注意：如需对位置进行操作，要记得首先把元素的CSS position属性设置为relative、fixed或absoult。

用animate()方法做一个多属性同时运动的例子

通过上面的代码我们可以看出jquery运动可以做多属性运动，也可以做链式运动，也可以做单属性运动。调用方式跟我们用原始javascript封装的框架一样。区别在于这里可以设定速度。json串中带px等单位。jquery运动做链式运动的时候可以使用回调函数，多写几个运动。animate的更多使用方法可以参考http://www.w3school.com.cn/jq...。

注意：是否可以用animate()方法来操作所有css属性？是的，几乎可以！不过，需要记住一件重要的事情：当使用animate()时，必须使用Camel标记法书写所有的属性名，比如，必须使用paddingLeft而不是padding-left，使用marginRight而不是margin-right等等。同时，色彩动画并不包含在核心jQuery库中。如果需要生成颜色动画，您需要从jQuery.com下载Color Animations插件。

animate()使用预定义的值——"show"/"hide"/"toggle"



  
    jquery animate可以使用预定义的值

animate()使用队列功能——类似于我们自己封装的链式运动

我们封装的运动没有队列功能。但是jquery提供针对动画的队列功能。这就意味着如果您在彼此之后编写多个animate()调用，jquery会创建包含这些方法调用的内部队列。然后逐一运动这些animate调用。



  
    animate队列调用

stop()停止动画或效果

stop()方法用于停止动画或效果，在它们完成之前。
stop()方法适用于所有jquery效果函数，包括滑动、淡入淡出和自定义动画。
语法：

$(selector).stop(stopAll,goToEnd);

可选参数stopAll规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选参数goToEnd规定是否立即完成当前动画。默认是false。

所以，默认的stop()会清除在被选元素上指定的当前动画。




  stop()清除当前运动
  
  
  


  
  点击这里，向下滑动面板
  Hello world!

idc机房托管专线服务水平运动停止运动左右运动运动半径

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97302.html

回味jQuery系列（2）-动画效果

摘要：参数代表回调函数。参数为变化样式的对象必传，速度可选，回调函数可选。这是，肯定会想到采用回调函数来解决。确实可以解决问题，但是当列队动画变多时，回调函数的可读性大大降低确实一个非常烦人的问题。提供了一个类似于回调函数的方法。 jQuery-动画效果浅析动画可以给网站的用户体验加分，让网页更加活泼。不过，什么东西都需要适量，简易快捷的动画会给网站加分不少。比如购物网站的个人中心按钮ho...

IamDLY 2019-08-20 10:33 评论0 收藏0
jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。一、事件的绑定与解绑 1.1 jQuery的简单绑定 1.1.1 on(events,fn)事件(新版本使用) 为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法...

MkkHou 2019-08-29 16:16 评论0 收藏0
jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。一、事件的绑定与解绑 1.1 jQuery的简单绑定 1.1.1 on(events,fn)事件(新版本使用) 为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法...

ssshooter 2019-08-23 10:40 评论0 收藏0
jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。一、事件的绑定与解绑 1.1 jQuery的简单绑定 1.1.1 on(events,fn)事件(新版本使用) 为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法...

joyvw 2019-08-02 11:08 评论0 收藏0
jQuery动画效果、jQuery插件使用

摘要：一事件的绑定与解绑的简单绑定事件新版本使用为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。将整个文件放至项目的任意目录不要移动其文件结构，它们具有完整的依赖体系。一、事件的绑定与解绑 1.1 jQuery的简单绑定 1.1.1 on(events,fn)事件(新版本使用) 为指定的元素添加一个或多个事件处理程序，并规定当这个事件发生时运行的函数。on()方法...

AlphaGooo 2019-08-05 14:35 评论0 收藏0