正文
jquery入门教程,Jquery教程
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下：
1.自制折叠内容块
内容块如下：
div
class="module"
div
class="caption"
span标题/span
img
src="rollup.gif"
alt="rollup"
title="rolls
up
this
module"/
/div
div
class="body"
近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在。
/div
/div
给img元素绑定点击事件。
$(function()
{
$('div.caption
img').click(function
()
{
//先找到img的父级元素，再找该父级元素的子元素
var
$body
=
$(this).closest('div.module').find('div.body');
if
($body.is(':hidden'))
{
$body.show();
}
else
{
$body.hide();
}
});
});
运行效果如下图所示：
切换元素的显示状态，还可以用toggle方法。
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle();
});
});
以上是没有动画效果的，有时候感觉会很唐突。实际上，show,hide,toggle方法都可以有动画效果。比如：
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle('slow');
});
});
又比如：
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle('slow',
function()
{
$(this).closest('div.module').toggleClass('rolledup',
$(this).is(':hidden'))
});
});
});
2.使元素淡入淡出
fadeIn(speed,
callback)
fadeOut(speed,
callback)
fadeTo(speed,
opacity,
callback)
3.上下滑动元素
slideDown(speed,
callback)
slideUp(speed,
callback)
slideToggle(speed,
callback)
4.停止动画
stop(clearQueue,
gotoEnd)
5.创建自定义动画
animate(properties,
duration,
easing,
callback)
$('.classname').animate({opacity:'toggle'},'slow')
如果写一个扩展函数。
$.fn.fadeToggle
=
function(speed){
return
this.animate({opacity:'toggle'},'slow');
}
6.自定义缩放动画
$('.classname').each(function(){
$(this).animate({
width:
$(this).width()
*
2,
height:
$(this).height()
*
2
});
});
7.自定义掉落动画
$('.classname').each(function(){
$(this)
.css("position","relative")
.animate({
opacity:
0,
top:
$(window).height()
-
$(this).height()
-
$(this).position().top
},'slow',function(){
$(this).hide();
})
});
8.自定义消散动画
$('.classname').each(function(){
var
position
=
$(this).position();
$(this)
.css({
position:
'absolute',
top:
position.top,
left:position.left
})
.animate({
opacity:
'hide',
width:
$(this).width()*5,
height:
$(this).height()*5
top:
position.top
-
($(this).height()
*
5
/
2),
left:
position.left
-
($(this).width()
*
5
/2)
},'normal');
});
9.队列中的动画
//动画插入队列
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('button').click(function(){
$('img').dequeue('chain');
//删除队列中的动画
})
cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration,
name)//为队列中所有未执行的动画添加延迟
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。
相关问答
Q1: jQuery选择器基础入门教程
本文实例讲述了jQuery选择器用法。分享给大家供大家参考，具体如下：
什么是jQuery选择器
使用JavaScript操作页面上得DOM元素时，首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。
在jQuery中则完全不同，jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象，并且将对象以jquery对象的形式返回。
首先来看看什么是选择器。
//根据id获取jQuery对象
var
jQueryObject=$("#testDiv");
上例中使用了id选择器，选取id为testDiv的DOM对象并将它放入jQuery对象，最后返回了一个jQuery对象。
现在通过jQueryObject变量就可以操作testDiv图层了，因为jQueryObject是一个jQuery对象，所以可以使用所有的jQuery对象方法。比如修改图层中的HTML内容：
jQueryObject.html("修改后的HTML内容");
通过ID选中元素是最有效率的jQuery选择器。这是因为在原始的javascript中就提供了选中id的方法document.getElementById()。有关选择器的使用技巧将在后面提到。
jQuery选择器的强大在于提供了丰富的选择器，如果使用原始javascript则需要编写很多的代码才能实现。这极大减少了开发人员的工作量。
jQuery选择器核心函数
jQuery选择器调用的是jQuery核心函数：
jQuery(EXPRESSION,[econtext]);
这个函数接收一个包含选择器表达式的字符串，然后用这个字符串去匹配一组元素。
jQuery的核心功能都是通过这个函数实现的。jQuery中的大部分功能都基于这个函数，或者说都是在以某种方式使用这个函数。该函数最基本的用法就是向他传递一个表达式（通常由CSS选择器组成），然后根据这个表达式查找所有匹配的元素。
默认情况下，如果没有指定context参数，$()将在当前的HTML
document中查找DOM元素：如果指定了context参数，如一个dom元素集jQuery对象，则会在这个context中查找。在jQuery1.3.2以后，其返回的元素顺序等同于在context中出现的先后顺序。
参数说明如下：
~Expression：必选参数，选择器表达式。
~Context：可选参数，选择器上下文
~jQuery，选择器返回的jQuery对象，jQuery对象，jQuery对象是一个集合，可以使用链式语法调用各种jQuery函数。
Context参数能够缩小选择器的范围，加快查找速度。
更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery选择器用法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》
希望本文所述对大家jquery程序设计有所帮助。
Q2: jQuery怎么入门最好
去到网上下载一份jQuery 1.4.1 参考文档，学着边看边做。
我是从“上海全鼎软件学院”毕业的————————
Q3: JQuery的入门教程
去 W3CSchool 搜索 JQUERY 应该能带你入门，要精通的话，就得练习了
Q4: 我是学软件的，怎么才能学好jquery呢
最简单的办法,去使用jquery.
(1)入门的时候去按教程练习.
(2)入门后在项目中使用.一旦用上,你不用jquery,你会觉得很痛苦的.因为jquery实在太强大了.而且效率提高太多了.
