基于JQuery 滑动与动画的说明介绍

 更新时间:2013年04月18日 16:34:33   作者:  
本篇文章小编为大家介绍,基于JQuery 滑动与动画的说明介绍。需要的朋友参考下

jQuery 滑动方法:您可以在元素上创建滑动效果。
slideDown() 向下滑动元素。
slideUp() 向上滑动元素。
slideToggle() 在 slideDown() 与 slideUp() 方法之间进行切换。

$(selector).slide(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。

jQuery 动画 - jQuery animate() 方法用于创建自定义动画。
语法:
$(selector).animate({params},speed,callback);
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
默认情况下,所有 HTML 元素的位置都是静态的,并且无法移动。如需对位置进行操作,记得首先把元素的CSS 的 position 属性设置为 relative、fixed 或 absolute。
jQuery animate() - 能够操作多个属性
如果需要生成颜色动画,您需要从 jQuery.com 下载 Color Animations 插件。
jQuery animate() - 使用相对值
也可以定义相对值(该值相对于元素的当前值)。需要在值的前面加上 += 或 -=:

jQuery animate() - 使用预定义的值
您甚至可以把属性的动画值设置为 "show"、"hide" 或 "toggle":
$("button").click(function(){
$("div").animate({
height:'toggle'
});
});

jQuery animate() - 使用队列功能
默认地,jQuery 提供针对动画的队列功能。
这意味着如果在彼此之后编写多个 animate() 调用,jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。

ex1,ex2

jQuery stop() 方法

jQuery stop() 方法用于停止动画或效果,在它们完成之前。

stop() 方法适用于所有 jQuery 效果函数,包括滑动、淡入淡出和自定义动画。

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

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

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

因此,默认地,stop() 会清除在被选元素上指定的当前动画。

相关文章

  • jquery 动态合并单元格的实现方法

    jquery 动态合并单元格的实现方法

    下面小编就为大家带来一篇jquery 动态合并单元格的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 用jQuery简化Ajax开发实现方法

    用jQuery简化Ajax开发实现方法

    使用 jQuery 将使 Ajax 变得及其简单。jQuery 提供有一些函数,可以使简单的工作变得更加简单,复杂的工作变得不再复杂。
    2010-04-04
  • jquery插件开发之实现md5插件

    jquery插件开发之实现md5插件

    这篇文章主要介绍了jquery开发实现的md5插件,最后返回的是一串十进制数,在jquery1.9.2下测试通过,需要的朋友可以参考下
    2014-03-03
  • jquery dialog键盘事件代码

    jquery dialog键盘事件代码

    jquery dialog键盘事件代码,检测回车等事件的触发问题。
    2010-08-08
  • jQuery选择器中含有空格的使用示例及注意事项

    jQuery选择器中含有空格的使用示例及注意事项

    选择器中的空格是不容忽视的,多一个空格或少一个空格也许得到的结果会截然不同的,下面以一个示例为大家详细介绍下到底有什么不同,感兴趣的朋友额可以参考下
    2013-08-08
  • jQuery实现点击标题输入详细信息

    jQuery实现点击标题输入详细信息

    点击标题,输入详细信息,点击确定按钮,完成,把不必要的选项隐藏,当用户真正有需要的时候,在显示出来
    2013-04-04
  • jQuery扩展实现text提示还能输入多少字节的方法

    jQuery扩展实现text提示还能输入多少字节的方法

    这篇文章主要介绍了jQuery扩展实现text提示还能输入多少字节的方法,涉及jQuery扩展及字符串操作相关技巧,需要的朋友可以参考下
    2016-11-11
  • jQuery复制表单元素附源码分享效果演示

    jQuery复制表单元素附源码分享效果演示

    当我们遇到提交表单时,需要我们重复添加好几个表单,在订单表格中添加多个不同型号的产品信息。这个时候有复制表单表单按钮,也就是新增一项,通过点击复制按钮来实现新增一项,怎么实现的呢?下面小编跟大家分享,需要的朋友的朋友可以参考下
    2015-09-09
  • jquery canvas生成带有二维码的海报

    jquery canvas生成带有二维码的海报

    这篇文章主要为大家详细介绍了jquery canvas生成带有二维码的海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • 清空元素html(

    清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)

    这篇文章主要介绍了清空元素html("")、innerHTML="" 与 empty()的区别和应用,详细介绍了三者之间的原理及应用,需要的朋友可以参考下
    2017-08-08

最新评论