jQuery起点教程之Animate(5)

简介: jQuery起点教程之Animate是个好东西,一个非常好的效果你可以用jquery自带的函数,比如show(),hide(),Animate()等函数。更确切的说这些函数才是jquery吸引人的地方。

jQuery起点教程之Animate是个好东西,一个非常好的效果你可以用jquery自带的函数,比如show(),hide(),Animate()等函数。更确切的说这些函数才是jquery吸引人的地方。
一些动态的效果可以使用 show() 和 hide()来表现:

$(document).ready(function() {
        $("a").toggle(function() {
                $(".stuff").hide('slow');
        }, function() {
                $(".stuff").show('fast');
        });
});

你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:
$(document).ready(function() {
        $("a").toggle(function() {
                $(".stuff").animate({
                        height: 'hide',
                        opacity: 'hide'
                }, 'slow');
        }, function() {
                $(".stuff").animate({
                        height: 'show',
                        opacity: 'show'
                }, 'slow');
        });
});

很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档

这些效果插件是位于jQuery插件列表的前面的,当然也有很多其他的插件,比如我们下一章讲到的表格排序插件。

本章的相关链接:
目录
相关文章
|
开发框架 JSON JavaScript
ASP.NET Core3.1实战教程---基于Jquery单文件上传
ASP.NET Core3.1实战教程---基于Jquery单文件上传
139 0
|
JavaScript 前端开发
调用jQuery的animate()方法无法移动的问题
调用jQuery的animate()方法无法移动的问题
|
JavaScript
jQuery 自定义动画 animate(详细步骤)
jQuery 自定义动画 animate(详细步骤)
137 0
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
146 1
|
JavaScript 前端开发 索引
jQuery学习教程,写更少的代码,做更多的事情(二)
jQuery学习教程,写更少的代码,做更多的事情(二)
|
移动开发 JavaScript HTML5
jQuery工具提示插件tooltip.js 使用教程
jQuery工具提示插件tooltip.js 使用教程
|
JavaScript 前端开发
JQuery入门到精通教程(二)
JQuery入门到精通教程(二)
87 0
|
JavaScript 前端开发
JQuery入门到精通教程()
JQuery入门到精通教程()
127 0
|
XML JavaScript 前端开发
【jQuery超快速入门教程】上篇
【jQuery超快速入门教程】上篇
230 0
|
JavaScript
jQuery animate方法-25
jQuery animate方法-25
118 0
jQuery animate方法-25